Vue v-if 指令可以用来根据表达式执行的结果的真假,来选择是否要挂载到 DOM 上。Vue v-if 指令中,如果条件为真,就执行标签快中的内容,条件为假,则不执行标签快中的内容。
Vue v-show 指令如果条件为 false,运行后,还是生成了条件为 false 所在的标签,但是只是让其 display 属性为 none,即该标签不进行显示,这是 Vue v-if 标签与 Vue v-show 标签的区别。
Vue v-if 有较高的切换性能消耗,Vue v-show 有较高的初始渲染消耗。如果元素涉及到频繁的切换,最好不要用 Vue v-if,而应该选择 Vue v-show。
如果元素可能永远也不会被显示出来,则推荐使用 Vue v-if。
<!DOCTYPE html>
<html>
<head>
<title>Vue v-if 指令教程</title>
<script type="text/javascript" src="./lib/vue-2.6.10.min.js"></script>
</head>
<style type="text/css">
</style>
<body>
<div id="app">
<input type="button" value="toggle" @click="toggle">
<h3 v-if='flag'>这是使用v-if控制的元素</h3>
<p>嗨客网(www.haicoder.net)</p>
</div>
</body>
<script type="text/javascript">
var vm = new Vue({
el :'#app',
data:{
flag:true
},
methods:{
toggle(){
this.flag = !this.flag;
}
}
})
</script>
</html>
浏览器运行效果如下图所示:
我们点击按钮,可以实现 h3 标签的显示与隐藏。即 Vue v-if 指令中的 flag 为真时, h3 标签显示,当 flag 为假时, h3 标签隐藏。
现在我们点击 toggle 按钮,来隐藏 h3 标签,此时浏览器显示效果如下:
隐藏了 h3 标签之后,我们可以看到 h3 标签已经不存在了。
Vue v-if 指令可以用来根据表达式执行的结果的真假,来选择是否要挂载到 DOM 上。Vue v-if 指令中,如果条件为真,就执行标签快中的内容,条件为假,则不执行标签快中的内容。