Vue v-show指令

Vue v-show指令教程

Vue v-show 指令通过改变元素的 css 属性 (display) 来决定元素是显示还是隐藏。

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

Vue v-if 指令如果条件为 false,那么在生成的 HTML 语句中,条件为 false 的标签不会生成在代码中,这是 Vue v-show 指令与 Vue v-if 标签的区别。

Vue v-show与v-if

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

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

案例

Vue v-show

<!DOCTYPE html> <html> <head> <title>Vue v-show 指令教程</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-show='flag'>这是使用v-show控制的元素</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>

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

42 vue vshow.png

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

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

43 vue vshow.png

隐藏了 h3 标签之后,我们可以看到 h3 标签仍然存在,只是将 display 属性设置了 none。

Vue v-show指令总结

Vue v-show 指令通过改变元素的 css 属性 (display) 来决定元素是显示还是隐藏。

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