1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title></title> 6 </head> 7 <script src="../js/vue.js"></script> 8 <body> 9 <div id="app"> 10 11 <!-- 這么寫比較麻煩， 因為還要寫在 methods里 一個toggle方法 --> 12 <!-- <input type="button" name="" id="" value="" @click="toggle" /> --> 13 14 <input type="button" name="" id="" value="toggle" @click="flag=!flag" /> 15 16 <!-- v-if 的特點：每次都會重新刪除或創建元素 --> 17 <!-- v-show 的特點： 每次不會重新經行DOM的刪除和創建操作，只是切換了元素的 display:none 樣式 --> 18 <!-- 按F12打開控制台，觀察 v-if 和 v-show 標簽 --> 19 20 <!-- v-if 有較高的切換性能消耗 --> 21 <!-- v-show 有較高的初始渲染消耗 --> 22 23 <!-- 如果元素涉及到頻繁的切換，最好不要使用 v-if， 而是推薦使用 v-show --> 24 <!-- 如果元素可能永遠也不會被顯示出來被用戶看到，則推薦使用 v-if --> 25 26 <h3 v-if="flag">這是一個v-if控制的元素</h3> 27 <h3 v-show="flag">這是一個v-show控制的元素</h3> 28 29 </div> 30 </body> 31 </html> 32 <script> 33 var vm = new Vue({ 34 el:'#app', 35 data:{ 36 flag:true 37 }, 38 methods:{ 39 // toggle(){ 40 // this.flag = ! this.flag 41 // } 42 } 43 }) 44 </script>
在控制台可以觀察到 v-if 和 v-show 的代碼顯示情況
點擊 toggle 按鈕，控台代碼代碼變為下圖所示
我們可以看到 v-if消失， v-show的 display屬性變為 none，這就是他倆的區別（最詳細解釋見代碼塊的//注釋）
2019-06-11 13:23:17