浅谈Vue中条件渲染：v-if和v-show的使用

最新推荐文章于 2023-04-21 15:15:27 发布

程序员-小李

最新推荐文章于 2023-04-21 15:15:27 发布

阅读量2.1k

点赞数 1

分类专栏： # Vue 文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/weixin_44107140/article/details/121333420

版权

Vue 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

浅谈Vue中的条件渲染

条件渲染是根据表达式真值情况动态选择与之绑定的元素是否在页面显示出来

有v-if和v-show这两种方式来实现动态渲染

v-if

根据表达式的真假值决定该元素是否存在与页面中

举例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../../js/vue.js"></script>
</head>
<body>
    <div id="app">
        <!-- 条件渲染 -->
        <!-- v-if的使用 -->
        <p v-if="4>2">1.为真我就显示</p>
        <p v-if="true">2.为真我就显示</p>
        <p v-if="flag1">3.为真我就显示</p>
        <p v-if="1>2?false:true">4.为真我就显示</p>
        <p v-if="1===1">5.为真我就显示</p>

        <p v-if="4<2">6.为真我就显示</p>
        <p v-if="false">7.为真我就显示</p>
        <p v-if="flag2">8.为真我就显示</p>
        <p v-if="1<2?false:true">9.为真我就显示</p>
        <p v-if="1===2">10.为真我就显示</p>
        <!-- 不展示的dom元素直接被移除 -->
    </div>
</body>
<script>
    new Vue({
        el:'#app',
        data() {
            return {
                flag1:true,
                flag2:false,
            }
        },
    })
</script>
</html>

效果：

在这里插入图片描述

从上可以看出，只有当v-if内表达式的值为真时，与之绑定的元素才会显示到页面中

另外，Vue也支持多条件判断，v-if, v-else-if ,v-else

如：

		<!-- 只显示其一 -->
        <p v-if="false">A1</p>
        <p v-else>B1</p>
        
        <!-- 连续判断 -->
        <p v-if="false">A2</p>
        <p v-else-if="false">B2</p>
        <p v-else>C2</p>

效果：

在这里插入图片描述

v-show

根据表达式的真假值，切换元素的display属性值，当条件变化时，该指令触发过渡效果。

举例：

        <p v-show="true">标题一</p>
        <p v-show="false">标题二</p>
        <p v-show="true">标题三</p>

效果：

在这里插入图片描述

从上面效果可以看出，使用v-show实现条件渲染，dom元素还是存在页面的，只是隐藏了没有显示出来

总结：

v-if：
适用于：切换频率较低的场景
特点：不展示的dom元素直接被移除
注意：v-if可以和：v-else-if,v-else一起使用，但要求结构不能被“打断”即v-if与v-else所在语句必须连续

v-show：
适用于：切换频率较高的场景
特点：不展示的dom元素未被移除，只是使用样式隐藏

程序员-小李

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
打赏
0
评论
浅谈Vue中条件渲染：v-if和v-show的使用

浅谈Vue中的条件渲染条件渲染是根据表达式真值情况动态选择与之绑定的元素是否在页面显示出来有v-if和v-show这两种方式来实现动态渲染v-if根据表达式的真假值决定该元素是否存在与页面中举例：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"&g
复制链接

扫一扫