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>