vue快速入门(六) 之 v-show 和 v-if 用法

最新推荐文章于 2023-09-16 17:59:12 发布

一口木桶饭

最新推荐文章于 2023-09-16 17:59:12 发布

阅读量531

点赞数

分类专栏： vue 文章标签： vue

本文链接：https://blog.csdn.net/weixin_44415928/article/details/104897203

版权

vue 专栏收录该内容

12 篇文章 1 订阅

订阅专栏

在纯前端的页面中,我们可以设置一个标签的隐藏与否,而v-show则是vue中来实现该功能的
在这里插入图片描述

<body>
    <div id="app">
        <h1 v-show="isSHow">this is a test lebel</h1>
        <button @click="hide">点击隐藏或展开</button>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
        var app = new Vue({
            el: "#app",

            data: {
                isShow: true
            },

            methods: {
                hide: function() {
                    this.isShow = !this.isShow
                }
            }
        })
    </script>
</body>

我们设置了一个h1标签,初始我们设置v-show是true,表示要展示,然后当我们点击按钮,isShow变成false,就会隐藏,再次点击就又成了true来实现隐藏
同时v-show还支持表达式写法如下
在这里插入图片描述
其实v-if和v-show呢大同小异,用法都是用来控制显示与否

发现都可以显示出来
唯一的区别就是当我们隐藏的时候,v-show是改变css样式,变成不展示,而v-if则是直接从代码里边删掉

可以看出,if的消耗更大

一口木桶饭

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
vue快速入门(六) 之 v-show 和 v-if 用法

在纯前端的页面中,我们可以设置一个标签的隐藏与否,而v-show则是vue中来实现该功能的<body> <div id="app"> <h1 v-show="isSHow">this is a test lebel</h1> <button @click="hide">点击隐藏或展开</b...
复制链接

扫一扫