一、vue的条件指令: v-if、v-else-if 、 v-else
v-else-if 要紧跟v-if,v-else 要紧跟v-else-if或v-if,表达式的值为真时,当前元素/组件及所有子节点将被渲染,为假时被移除。
v-if、v-else-if 、 v-else这三个指令后面跟的是表达式。vue的条件指令可以根据表达式的值在DOM中渲染或销毁元素/z组件。
代码示例
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!--引入最新的vue稳定版本-->
<script type="text/javascript" src="https://unpkg.com/vue/dist/vue.min.js"></script>
<link rel="stylesheet" href="./css/style.css" type="text/css">
</head>
<body>
<!--理解v-cloak指令的作用,以及应用场景-->
<div id="app" >
<!--javaScript里面的等于号是===-->
<!--if、else、指令-->
<p v-if="status==1">当status为1时,显示该行</p>
<p v-else-if="status==2">当status为2时,显示该行</p>
<p v-else>否则显示该行</p>
</div>
<!--script脚本-->
<script>
//创建vue实例
var vue=new Vue({
el: '#app',
data: {
status: 2
}
});
</script>
</body>
</html>
运行结果:
条件渲染指令