Vue中的条件渲染v-if、v-show
这两个指令都是用于显示或者隐藏元素,其值都是为能够在JS执行环境中正确执行的表达式。
但是最终指令会将其转换为true或者false。拿v-if=""来说,其底层就是if(){}语句,""中传入的表达式就会放在()小括号内判断,最终得出true或false,这个就是JS的语法了。
为true时,v-if或v-show所在的标签隐藏;
反之为false时,v-if或v-show所在的标签显示。
写代码演示一下:
<div id="box">
<div v-if="true">1</div>
<div v-if="flag">2</div>
<div v-if="!flag">3</div>
<div v-if="flag+111">4</div>
<div v-show="true">5</div>
<div v-show="flag">6</div>
<div v-show="!flag">7</div>
<div v-show="flag+111">8</div>
</div>
<script>
new Vue({
el:"#box",
data:{
flag:true
}
})
</script>
看一下页面显示情况:
可以看到只有3和7没有显示在,其余的都显示了,就应证了我们前面所说的JS环境下解析表达式为true显示,false不显示。
同时我们看到v-if和v-show好像效果相同,那么它们的区别是什么呢?
我们可以在元素中看到区别:
v-if绑定的标签是被移除了,v-show绑定的标签是通过给行内添加display:none隐藏。
那这两个指令到底谁好呢?
既然他们同时存在,那么说明它们各有优势,各有适合的适用场景;
v-if 移除元素来切换模块,具有更高的渲染消耗 常用在不常切换的业务;
v-show -css的隐藏元素(display:none)切换模块 -具有更高的内存消耗 用于经常切换的业务。
我们在样式绑定的时候做了切换效果,这里学习了这两个指令也可以实现效果切换。
动手敲敲:
<style>
.box11,.box12{
width: 100px;
height: 50px;
background-color: darkcyan;
text-align: center;
}
[v-cloak]{
/* 解决第一次加载文字闪烁的问题 */
display: none;
}
</style>
<div id="box1">
<button @click="change">点击切换页面</button>
<div v-cloak v-if="flag" class="box11">{{msg}}</div>
<div v-cloak v-if="!flag" class="box12">{{msg2}}</div>
</div>
<script>
new Vue({
el:"#box1",
data:{
flag:true,
msg:"页面1",
msg2:"页面2",
},
methods: {
change(){
this.flag=!this.flag
}
},
})
</script>
最开始flag为true,box11显示,box12移除,点击按钮触发事件后flag取反,box11移除,box12显示,再点再取反,就达到切换效果。
页面效果:
点击过后: