Vue v-if指令

Vue v-if指令教程

Vue v-if 指令可以用来根据表达式执行的结果的真假,来选择是否要挂载到 DOM 上。Vue v-if 指令中,如果条件为真,就执行标签快中的内容,条件为假,则不执行标签快中的内容。

Vue v-show 指令如果条件为 false,运行后,还是生成了条件为 false 所在的标签,但是只是让其 display 属性为 none,即该标签不进行显示,这是 Vue v-if 标签与 Vue v-show 标签的区别。

Vue v-if与v-show

Vue v-if 有较高的切换性能消耗,Vue v-show 有较高的初始渲染消耗。如果元素涉及到频繁的切换,最好不要用 Vue v-if,而应该选择 Vue v-show。

如果元素可能永远也不会被显示出来,则推荐使用 Vue v-if。

案例

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>

浏览器运行效果如下图所示:

40 vue vif.png

我们点击按钮,可以实现 h3 标签的显示与隐藏。即 Vue v-if 指令中的 flag 为真时, h3 标签显示,当 flag 为假时, h3 标签隐藏。

现在我们点击 toggle 按钮,来隐藏 h3 标签,此时浏览器显示效果如下:

41 vue vif.png

隐藏了 h3 标签之后,我们可以看到 h3 标签已经不存在了。

Vue v-if指令总结

Vue v-if 指令可以用来根据表达式执行的结果的真假,来选择是否要挂载到 DOM 上。Vue v-if 指令中,如果条件为真,就执行标签快中的内容,条件为假,则不执行标签快中的内容。