【Vue.js】007-条件渲染

妖狐艹你老母 2023-10-05 08:22 9阅读 0赞

# 一、v-if指令 #

## 1、概述 ##

v-if 指令用于条件性地渲染一块内容，这块内容只会在指令的表达式返回 为true的时候被渲染；

可以使用 v-else 指令来表示 v-if 的“else 块”，v-else 元素必须紧跟在带 v-if 或者 v-else-if 的元素的后面，否则它将不会被识别；

v-else-if，顾名思义，充当 v-if 的“else-if 块”，可以连续使用，类似于 v-else，v-else-if 也必须紧跟在带 v-if 或者 v-else-if 的元素之后；

用 key 管理可复用的元素：见[https://cn.vuejs.org/v2/guide/conditional.html\#用-key-管理可复用的元素][https_cn.vuejs.org_v2_guide_conditional.html_-key-]

## 2、代码演示 ##

<!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="utf-8">
    		<title></title>
    		<script src="../../js/vue.js"></script>
    	</head>
    	<body>
    		<div id="app">
    			<h1 v-if="have">
    				我有一栋别墅！
    			</h1>
    			
    			<h1 v-else-if="realHave">
    				我有一栋别墅！
    			</h1>
    			
    			<h1 v-else>
    				好吧，我没有别墅！
    			</h1>
    			
    			<template v-if="ok">
    				<h1>Title</h1>
    				<p>Paragraph 1</p>
    				<p>Paragraph 2</p>
    			</template>
    			
    			<template v-if="username">
    				<label>Username</label>
    				<input placeholder="Enter your username" key="username-input">
    			</template>
    			<template v-else>
    				<label>Email</label>
    				<input placeholder="Enter your email address" key="email-input">
    			</template>
    			<br/>
    			<button v-on:click="change">改变登录方式</button>
    		</div>
    		<script>
    			var app = new Vue({
    				el: "#app",
    				data: {
    					have: false,
    					realHave: false,
    					ok: true,
    					username:true
    				},
    				methods:{
    					change:function () {
    						if(app.username){
    							app.username = false;
    						}else{
    							app.username = true;
    						}
    					}
    				}
    			});
    		</script>
    	</body>
    </html>

## 3、运行结果 ##

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI5Njg5MzQz_size_16_color_FFFFFF_t_70][]

# 二、v-show指令 #

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI5Njg5MzQz_size_16_color_FFFFFF_t_70 1][]

# 三、v-if vs v-show #

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI5Njg5MzQz_size_16_color_FFFFFF_t_70 2][]

# 四、v-if 与 v-for 一起使用 #

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI5Njg5MzQz_size_16_color_FFFFFF_t_70 3][]

[https_cn.vuejs.org_v2_guide_conditional.html_-key-]: https://cn.vuejs.org/v2/guide/conditional.html#%E7%94%A8-key-%E7%AE%A1%E7%90%86%E5%8F%AF%E5%A4%8D%E7%94%A8%E7%9A%84%E5%85%83%E7%B4%A0
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI5Njg5MzQz_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20200814085108744.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI5Njg5MzQz,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI5Njg5MzQz_size_16_color_FFFFFF_t_70 1]: https://img-blog.csdnimg.cn/20200814085203380.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI5Njg5MzQz,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI5Njg5MzQz_size_16_color_FFFFFF_t_70 2]: https://img-blog.csdnimg.cn/20200814085342866.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI5Njg5MzQz,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI5Njg5MzQz_size_16_color_FFFFFF_t_70 3]: https://img-blog.csdnimg.cn/2020081408544575.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI5Njg5MzQz,size_16,color_FFFFFF,t_70