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 較好。