Vue学习（十三）——分支结构用法

最新推荐文章于 2024-01-18 19:01:56 发布

云中、漫步

最新推荐文章于 2024-01-18 19:01:56 发布

阅读量793

点赞数

分类专栏： Vue学习

本文链接：https://blog.csdn.net/weixin_44075963/article/details/108910707

版权

Vue学习专栏收录该内容

24 篇文章 14 订阅

订阅专栏

一、v-if

作用：过条件判断展示或者隐藏某个元素。或者多个元素。通常搭配 v -else或 v-else-if来使用。
使用场景举例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="js/vue.js"></script>
</head>
<body>
<div id="app">
    <div v-if="score>=90">优秀</div>
    // 这里需要注意，80<score<90在这里不支持。
    <div v-else-if="score<90&&score>=80">良好</div>
    <div v-else-if="score890&&score>=60">及格</div>
    <div v-else>不及格</div>
</div>
<script>
    var vue = new Vue({
        el: "#app",
        data: {
            score:10
    },
        methods: {
            handle: function () {
            }
        }
    });
</script>
</body>
</html>

在这里插入图片描述
可以看到：根据满足的条件，只渲染了一个div。

二、v-show

作用：根据表达式之真假值，切换元素的 display。

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="js/vue.js"></script>
</head>
<body>
<div id="app">
    <div v-show="flag">测试v-show</div>
    <button v-on:click="handle">切换</button>
</div>
<script>
    var vue = new Vue({
        el: "#app",
        data: {
            flag:true
    },
        methods: {
            handle: function () {
               this.flag = !this.flag
            }
        }
    });
</script>
</body>
</html>

三、v-show 和 v-if 区别

v-show本质就是标签display设置为none，控制隐藏
v-if是动态的向DOM树内添加或者删除DOM元素

在v-show="flag中，falg=true我们可以看到：
在这里插入图片描述
在v-show="flag中，falg=false我们可以看到：

四、v-show和v-if如何选择

如果我们需要频繁的让一个元素显示或者隐藏，这个时候我们推荐使用v-show，如果一个元素我们渲染出来改动比较小的话，推荐使用v-if。因为v-if是动态的向DOM树内添加或者删除DOM元素，性能开销比较大。

云中、漫步

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Vue学习（十三）——分支结构用法

目录一、v-if二、v-show三、v-show 和 v-if 区别四、v-show和v-if如何选择一、v-if作用：过条件判断展示或者隐藏某个元素。或者多个元素。通常搭配 v -else或 v-else-if来使用。使用场景举例：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> &lt
复制链接

扫一扫