1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title></title> 6 <script src="../vue.js" type="text/javascript" charset="utf-8"></script> 7 </head> 8 <body> 9 <div id="app"> 10 <input type="button" value="交換" @click="flag = !flag"> 11 12 <!-- v-if的特點：每次都會重新刪除和創建一個元素 --> 13 <!-- v-show的特點：每次不會重新進行Dom的刪除和創建操作，只是切換了元素的display屬性的值 --> 14 15 <!-- v-if 有較高的切換性能消耗 --> 16 <!-- v-show有較高的初始渲染消耗 --> 17 18 <!-- 如果元素涉及頻繁的切換，最好不使用v-if，而是推薦使用v-show --> 19 <!-- 如果元素可能永遠不會被顯示出來被用戶看到，則推薦使用v-if --> 20 21 <h3 v-if="flag">這是用v-if控制的元素</h3> 22 <h3 v-show="flag">這是用v-show控制的元素</h3> 23 </div> 24 </body> 25 <script type="text/javascript"> 26 var vm = new Vue({ 27 el:"#app", 28 data:{ 29 flag:true 30 }, 31 methods:{ 32 } 33 }) 34 </script> 35 </html>