vue中 v-show和v-if属性的区别 

 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>

 

posted @ 2019-09-16 15:46  养一只Tom猫  阅读(1417)  评论(0)    收藏  举报