十日谈 : Vue的 v-if 和 v-else-if 和 v-else 的使用
欢迎阅读我的Vue学习日记
v-if 和 v-else-if 和 v-else
1.这三个指令与JaveScript的条件语句 if | else | else if 类似
2.Vue的条件指令可以根据表达式的值在DOM中渲染或销毁元素或组件
<body>
<div id="app">
<h v-if="isShow">{{message}}</h>
</div>
<script src="../js/vue.js"></script>
<script>
const app = new Vue({
el:'#app',
data:{
message:'准许显示',
isShow:'true',
}
})
</script>
</body>
控制台输入app.isShow = false 显示就会消失
v-if 和v-else的结合使用
简单演示,具体逻辑和if else语句是一样的
<body>
<div id="app">
<h v-if="isShow">{{message}}</h>
<h v-else>isShow变成了false</h>
</div>
<script src="../js/vue.js"></script>
<script>
const app = new Vue({
el:'#app',
data:{
message:'准许显示',
isShow:'true'
}
})
</script>
</body>