码迷,mamicode.com
首页 > 其他好文 > 详细

Vue指令之`v-if`和`v-show`

时间:2019-09-24 17:32:42      阅读:90      评论:0      收藏:0      [点我收藏+]

标签:改变   UNC   spl   显示   cli   vue   初始   切换   one   

一般来说,v-if 有更高的切换消耗而 v-show 有更高的初始渲染消耗。因此,如果需要频繁切换 v-show 较好,如果在运行时条件不大可能改变 v-if 较好。

<body>
    <div class="box">
        <!-- v-if  等于true的时候 会把这个元素彻底移除掉-->
        <h1 v-if="flog">这里显示的是v-if绑定的数据</h1>
        <!-- v-show  等于true的时候,会把这个元素设置成display:none-->
        <h1 v-show="flog">这里显示的是v-show绑定的数据</h1>
        <input type="button" value="切换按钮" @click ="btnClick">
    </div>

    <script src="lib/vue-2.4.0.js"></script>
    <script>
        var vm=new Vue({
            el:.box,
            data:{
                flog:true
            },
            methods:{
                btnClick:function(){
                    this.flog=!this.flog
                }
            }
        });
    </script>

 

Vue指令之`v-if`和`v-show`

标签:改变   UNC   spl   显示   cli   vue   初始   切换   one   

原文地址:https://www.cnblogs.com/xiaowie/p/11579181.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!