前端VUE3.0,DAY16，条件渲染

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

疯子的梦想＠

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

阅读量107

点赞数

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

本文链接：https://blog.csdn.net/weixin_48681463/article/details/119454515

版权

前端专栏收录该内容

110 篇文章 4 订阅

订阅专栏

VUE3.0,DAY16

- - 条件渲染
  - 总结

条件渲染

1.让网页中的内容隐藏。v-show实际就是控制display。从网页后台可以看到，h1这个标题内容的结点还在，只是隐藏了而已。

<!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>条件渲染</title>
    <!--引入vue-->
    <script type="text/javascript" src="../vue.js"></script>
</head>

<body>
    <!--准备好一个容器-->
    <div id="root">
        <!--让标题时而显示时而隐藏-->
        <h1 v-show='false'>欢迎来到我的{{name}}</h1>
    </div>
</body>
<script type="text/javascript">
    Vue.config.productionTip = false  //阻止vue在启动时生成使用生产版本提示。
    new Vue({
        el: '#root',
        data() {
            return {
                name: 'csdn'
            }
        },
    })
</script>

</html>

在这里插入图片描述
2.使用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>条件渲染</title>
    <!--引入vue-->
    <script type="text/javascript" src="../vue.js"></script>
</head>

<body>
    <!--准备好一个容器-->
    <div id="root">
        <!-- 让标题时而显示时而隐藏,并不是删除h1这个节点
        <h1 v-show='false'>欢迎来到我的{{name}}</h1> -->
        <!--用v-if做条件渲染-->
        <h1 v-if='false'>示例{{name}}</h1>
    </div>
</body>
<script type="text/javascript">
    Vue.config.productionTip = false  //阻止vue在启动时生成使用生产版本提示。
    new Vue({
        el: '#root',
        data() {
            return {
                name: 'csdn'
            }
        },
    })
</script>

</html>

在这里插入图片描述
3.点击自加按钮，依据自加的次数不同，显示不同的内容，此处只会显示移一到三次自加。点击四次及以上不显示了。使用v-show实现。

<!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>条件渲染</title>
    <!--引入vue-->
    <script type="text/javascript" src="../vue.js"></script>
</head>

<body>
    <!--准备好一个容器-->
    <div id="root">
        <!-- 让标题时而显示时而隐藏,并不是删除h1这个节点
        <h1 v-show='false'>欢迎来到我的{{name}}</h1> -->
        <!--用v-if做条件渲染-->
        <!-- <h1 v-if='false'>示例{{name}}</h1> -->
        <h2>当前的值是：{{n}}</h2>
        <button @click="n++">点我n+1</button>

        <!--当点击按钮进行自加的时候，依据n的不同值，显示不同的内容。-->
        <div v-show="n === 1">从0开始，自加了一次</div>
        <div v-show="n === 2">从0开始，自加了两次</div>
        <div v-show="n === 3">从0开始，自加了三次</div>
    </div>
</body>
<script type="text/javascript">
    Vue.config.productionTip = false  //阻止vue在启动时生成使用生产版本提示。
    new Vue({
        el: '#root',
        data() {
            return {
                n: '0'
            }
        },
    })
</script>

</html>

在这里插入图片描述

4.使用v-if实现第3点的功能。效果一样。

<!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>条件渲染</title>
    <!--引入vue-->
    <script type="text/javascript" src="../vue.js"></script>
</head>

<body>
    <!--准备好一个容器-->
    <div id="root">
        <!-- 让标题时而显示时而隐藏,并不是删除h1这个节点
        <h1 v-show='false'>欢迎来到我的{{name}}</h1> -->
        <!--用v-if做条件渲染-->
        <!-- <h1 v-if='false'>示例{{name}}</h1> -->
        <h2>当前的值是：{{n}}</h2>
        <button @click="n++">点我n+1</button>

        <!--当点击按钮进行自加的时候，依据n的不同值，显示不同的内容。-->
        <div v-if="n === 1">从0开始，自加了一次</div>
        <div v-if="n === 2">从0开始，自加了两次</div>
        <div v-if="n === 3">从0开始，自加了三次</div>
    </div>
</body>
<script type="text/javascript">
    Vue.config.productionTip = false  //阻止vue在启动时生成使用生产版本提示。
    new Vue({
        el: '#root',
        data() {
            return {
                n: '0'
            }
        },
    })
</script>

</html>

总结

条件渲染:
1.v-if 写法:
(1).v-if=“表达式”
(2).v-else-if="表达式”
(3).else="表达式”
适用于:
切换频率较低的场景。
特点:不展示的DOM元素直接被移除。
注意: v-if可以和:v-else-if、v-else 起使用，但要求结构不能被“打断”。
2.V- show
写法: v-show="表达式”
适用于:切换频率较高的场景。
特点:不展示的DOM元素未被移除，仅仅是使用样式隐藏掉
3.备注:使用v-if的时，元素可能无法获取到，而使用v-show 定可以获取到。