分支指令（判断指令）

作用：

根据表达式的布尔值(true/false)进行判断是否渲染该元素

v-if / v-else / v-else-if

上述三个指令是分支中最常见的。根据需求，v-if可以单独使用，也可以配合v-else一起使用，也可以配合v-else-if和v-else一起使用。

v-show

v-show是根据表达式之真假值，切换元素的 display CSS属性（是根据表达式的布尔值来判断是否显示该元素）。

v-if系列与v-show的区别

v-if：控制元素是否渲染

v-show：控制元素是否显示（已经渲染，display:none;）

v-if系列指令、v-show指令可以与v-for指令结合起来使用（循环+分支）。

 <body>
    <div id="app">
        <!-- if系列 -->
        <div v-if="age <= 12">
            <!-- <= 12，儿童 -->
            儿童
        </div>
        <div v-else-if="age > 12 && age < 18">
            <!-- > 12 && < 18，少年 -->
            少年
        </div>
        <div v-else-if="age >= 18 && age < 30">
            <!-- >= 18 && < 30，青年 -->
            青年
        </div>
        <div v-else>
            <!-- >= 30 老年 -->
            老年
        </div>
 
        <!-- v-show -->
        <div v-show="flag">测试v-show</div>
    </div>
</body>
<script src="./js/vue.js"></script>
<script>
    new Vue({
        el: "#app",
        data: {
            age: 32,
            flag: false,
        },
    });
</script>

分支指令（判断指令）

作用：

v-if / v-else / v-else-if

v-show

v-if系列与v-show的区别

循环指令

class样式绑定

我逐你

Comments | NOTHING

取消回复

	<body>
	<div id="app">
	<!-- if系列 -->
	<div v-if="age <= 12">
	<!-- <= 12，儿童 -->
	儿童
	</div>
	<div v-else-if="age > 12 && age < 18">
	<!-- > 12 && < 18，少年 -->
	少年
	</div>
	<div v-else-if="age >= 18 && age < 30">
	<!-- >= 18 && < 30，青年 -->
	青年
	</div>
	<div v-else>
	<!-- >= 30 老年 -->
	老年
	</div>

	<!-- v-show -->
	<div v-show="flag">测试v-show</div>
	</div>
	</body>
	<script src="./js/vue.js"></script>
	<script>
	new Vue({
	el: "#app",
	data: {
	age: 32,
	flag: false,
	},
	});
	</script>