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

一般来说，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>

 经典案例  购入车选项 使用v-if 和v-else  或者 v-else if

 

    <div class="box">
       <button @click="handleClick()">Click</button>
       <div v-if="isCheck">空空如也</div>
       <ul v-else>
           <li v-for="item in gouru" >{{item}}</li>
       </ul>
    </div>



    <script src="vue-2.4.0.js"></script>
    <script>
       var vm= new Vue({
           el:'.box',
           data:{
               isCheck:true,
               gouru:['11111','22222','33333']
           },
           methods: {
               handleClick:function () {
                    this.isCheck=! this.isCheck
               },
           },
        })
    </script>
</body>
</html>

 

posted @ 2019-09-24 16:44  WhiteSpace  阅读(492)  评论(0)    收藏  举报