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

时间:2019-09-16
本文章向大家介绍vue中 v-show和v-if属性的区别,主要包括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>

原文地址:https://www.cnblogs.com/yanghaoyu0624/p/11479904.html