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>

巴特西

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

最新文章

热门文章