第五课 Vue中的显示隐藏指令

Vue中的显示与隐藏指令

v-show用于显示或隐藏DOM元素，配合布尔值表示显示状态，使用场景较多

基础示例：

    <style>
        .test{
            width: 100px;
            height: 100px;
            background: red;
        }
    </style>
    <div id="app">
        <div class="test" v-show="true"></div>
    </div>
    <script>
        new Vue({
            el: '#app'
        })
    </script> 

V-show

1） 配合data使用

指令中也可以传入data参数

    <div id="app">
        <div class="test" v-show="val"></div>
    </div>
    <script>
        new Vue({
            el: '#app',
            data: {
                val: false
            }
        })
    </script>   

2）配合methods使用

    <div id="app">
        <input type="button" value="点击我切换显示效果" @click="show()">
        <div class="test" v-show="val"></div>
    </div>
    <script>
        new Vue({
            el: '#app',
            data: {
                val: false
            },
            methods: {
                show(){
                    this.val = !this.val;
                }
            }
        })
    </script>  

3. 条件筛选

    <div id="app">
        <div class="test" v-show="val <= 10"></div>
    </div>
    <script>
        new Vue({
            el: '#app',
            data: {
                val: 10
            }
        })
    </script> 

原文地址：https://blog.csdn.net/weixin_44010641/article/details/142865717

免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！