vue之v-show基本使用

最新推荐文章于 2024-03-02 22:48:07 发布

兮动人

最新推荐文章于 2024-03-02 22:48:07 发布

阅读量2w

点赞数 2

分类专栏： Vue 文章标签： vue之v-show基本使用 vue vue.js v-show

本文链接：https://blog.csdn.net/qq_41684621/article/details/113766567

版权

Vue 专栏收录该内容

30 篇文章 23 订阅

订阅专栏

v-show：根据表达值的真假，切换元素的显示和隐藏

在这里插入图片描述

v-show 本质是切换元素的 display

<body>
    <div id="app">
        <input type="button" value="切换显示状态" @click="changeIsShow"><br>
        <img v-show="isShow" src="img/monkey.png" alt="">
    </div>

    <script src="../js/vue.js"></script>
    <script>
        const app = new Vue({
        el: '#app',
        data: {
            isShow: false,
            age: 17
            },
            methods: {
                changeIsShow: function () {
                    this.isShow =! this.isShow;
                }
            }
        })
    </script>
</body>

点击切换状态显示/隐藏
增加 age 累加效果

<body>
    <div id="app">
        <input type="button" value="切换显示状态" @click="changeIsShow"><br>
        <input type="button" value="累加年龄" @click="addAge">
        <img v-show="isShow" src="img/monkey.png" alt="">
        <img v-show="age>=18" src="img/monkey.png" alt="">
    </div>

    <script src="../js/vue.js"></script>
    <script>
        const app = new Vue({
        el: '#app',
        data: {
            isShow: false,
            age: 17
            },
            methods: {
                changeIsShow: function () {
                    this.isShow =! this.isShow;
                },
                addAge: function () {
                    this.age++;
                }
            }
        })
    </script>
</body>