vue之v-if基本使用

最新推荐文章于 2024-07-22 19:40:18 发布

兮动人

最新推荐文章于 2024-07-22 19:40:18 发布

阅读量2w

点赞数 4

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

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

版权

Vue 专栏收录该内容

30 篇文章 24 订阅

订阅专栏

v-if：根据表达式的真假，切换元素的显示和隐藏（操作DOM元素）

在这里插入图片描述

<body>
    <div id="app">
        <input type="button" value="切换显示" @click="toggleIsShow">
        <p v-if="isShow">兮动人</p>
        <p v-show="isShow">兮动人 v-show 修饰</p>
    </div>

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

在这里插入图片描述

通过控制台可以发现，v-show 的作用是把元素赋予 display:none 隐藏起来，而 v-if 是直接把元素给去掉
案例：v-if 表达式应用

<body>
    <div id="app">
        <h2 v-if="age>=35">年龄大小</h2>
    </div>

    <script src="../js/vue.js"></script>
    <script>
        const app = new Vue({
        el: '#app',
        data: {
            age: 40
            }
        })
    </script>
</body>