1.v-show
直接上示例：
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>v-show指令</title> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js" type="text/javascript" charset="utf-8"></script> </head> <body> <div id="box"> <button @click="toshow()">显示/隐藏</button> <p>v-show：<span v-show="show">{{text}}</span></p> </div> </body> <script type="text/javascript" charset="utf-8"> new Vue({ el: "#box", data: { text: "我要显示呀", show: false }, methods: { toshow: function() { this.show = !this.show; } } }) </script> </html>
v-show为false运行以后在浏览器看到的是这样的
<div id="box"> <button>显示/隐藏</button> <p>v-show：<span style="display: none;">我要显示呀</span></p> </div>
v-show 的元素会始终被渲染并保存在 dom 中，它只是简单的切换 css 的 dispaly 属性。
2.v-if
把v-show改为v-if再看：
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>v-if指令</title> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js" type="text/javascript" charset="utf-8"></script> </head> <body> <div id="box"> <button @click="toshow()">显示/隐藏</button> <p>v-show：<span v-if="show">{{text}}</span></p> </div> </body> <script type="text/javascript" charset="utf-8"> new Vue({ el: "#box", data: { text: "我要显示呀", show: false }, methods: { toshow: function() { this.show = !this.show; } } }) </script> </html>
v-if为false运行以后在浏览器看到的是这样的
<div id="box"> <button>显示/隐藏</button> <p>v-show： <!----> </p> </div>
v-if可以实现条件渲染，Vue会根据表达式的值的真假条件来渲染元素。
3.总结
v-show总结
1、v-show仅仅控制元素的显示方式，通过display属性的none
2、当我们需要经常切换某个元素的显示/隐藏时，使用v-show会更加节省性能上的开销
v-if总结
1、v-if会控制这个DOM节点的存在与否。
2、如果在运行时条件很少改变，则使用 v-if 较好。