v-if 和 v-show的区别

最新推荐文章于 2024-06-20 15:06:48 发布

「已注销」

最新推荐文章于 2024-06-20 15:06:48 发布

阅读量88

点赞数

分类专栏： vue 文章标签：前端 javascript css

本文链接：https://blog.csdn.net/weixin_67963221/article/details/125943568

版权

vue 专栏收录该内容

7 篇文章 1 订阅

订阅专栏

条件渲染

指令:

v-if、v-else-if、v-else
- v-if 系列指令绑定的标签中间不能写其他标签
- v-if 条件成立渲染DOM,不成立不渲染DOM
v-show
条件成立不成立都渲染DOM,显示和隐藏通过css的display:none;属性来控制的

    <p v-if="type == 0">0000</p>
    <p v-else-if="type == 1">1111</p>
    <p v-else-if="type == 2">2222</p>
    <p v-else>3333</p>

    <p v-show="isSuccess">成功</p>
    <p v-show="!isSuccess">失败</p>

    <script>
        new Vue({
            data: {
                type: 1, // type总共有4中情况  0、1、2、其他
                isSuccess: true // 两种情况 true / false
            }
        })
    </script>