首页 > 其他 > 详细

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

时间:2019-09-16 16:26:10      阅读:83      评论:0      收藏:0      [点我收藏+]
 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>

 

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

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

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!