条件渲染简单了解

zimugua

已于 2024-05-23 11:13:13 修改

阅读量249

点赞数 6

分类专栏： Vue的学习文章标签： vue.js html

于 2024-05-23 11:04:32 首次发布

本文链接：https://blog.csdn.net/zimugua/article/details/139141058

版权

Vue的学习专栏收录该内容

4 篇文章 0 订阅

订阅专栏

一、v-show

v-show是Vue.js提供的一个指令，用于根据表达式的真假值，控制元素的显示与隐藏。当条件为真时，元素会显示，当条件为假时，元素会隐藏，但仍然占据DOM空间,只是通过CSS控制元素的显示和隐藏。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src=https://cdn.bootcss.com/vue/2.7.16/vue.js></script>
    <title>Document</title>
</head>
<body>
    <div id="root">
        <h2 v-show="isShow">欢迎来到{{name}}</h2>
        <button @click="change">点击切换显示状态</button>
    </div>
</body>
<script>
    Vue.config.productionTip = false;
    new Vue({
        el: '#root',
        data: {
            name: '长沙理工大学',
            isShow: true
        },
        methods:{
            change(){
                this.isShow = !this.isShow
            }
        }
    })
</script>
</html>

在上面的代码中，我们通过v-show指令来根据isShow的值来显示或隐藏段落元素。点击按钮时，会调用change方法来切换isShow的值，从而达到显示或隐藏段落元素的效果。

二、v-if

v-if指令也是Vue.js中常用的条件渲染指令，它与v-show指令有一些区别。v-if指令是真正的条件渲染，它会直接根据表达式的真假值在 DOM 中创建或销毁元素，而不是简单地显示或隐藏元素。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src=https://cdn.bootcss.com/vue/2.7.16/vue.js></script>
    <title>Document</title>
</head>
<body>
    <div id="root">
        <h2 v-if="isShow">欢迎来到{{name}}</h2>
        <button @click="change">点击切换显示状态</button>
    </div>
</body>
<script>
    Vue.config.productionTip = false;
    new Vue({
        el: '#root',
        data: {
            name: '长沙理工大学',
            isShow: true
        },
        methods:{
            change(){
                this.isShow = !this.isShow
            }
        }
    })
</script>
</html>

三、v-else和v-else-if

v-else是Vue.js中用于条件渲染的指令之一，它通常和v-if一起使用，用来指定在v-if条件不成立时要显示的内容。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src=https://cdn.bootcss.com/vue/2.7.16/vue.js></script>
    <title>Document</title>
</head>
<body>
    <div id="root">
        <h2>当前的n值是：{{n}}</h2>
        <button @click="n++">点我n+1</button>
        <div v-if="n === 1">jack</div>
        <div v-else-if="n === 2">lucy</div>
        <div v-else-if="n === 3">bob</div>
        <div v-else>哈哈哈</div>
    </div>
</body>
<script>
    Vue.config.productionTip = false;
    new Vue({
        el: '#root',
        data: {
            n:0
        },
        methods:{
            change(){
                this.isShow = !this.isShow
            }
        }
    })
</script>
</html>

上述代码，当点击按钮时n+1，n=1时候展示jack，n=2展示lucy，n=3展示bob，n=其他展示哈哈哈。

四、v-if和v-show对比

条件渲染：
1、v-if

写法：

（1）、v-if="表达式"

（2）、v-else-if="表达式"

（3）、v-else="表达式"

适用于：切换频率较低的场景

特点：不展示的DOM元素直接被移除

注意：v-if可以和:v-else-if、v-else一起使用，但要求结构不能被“打断”

2、v-show

写法：v-show="表达式"

适用于：切换频率较高的场景

特点：不展示的DOM元素未被移除，仅仅是使用样式隐藏掉

3、备注：使用v-if的时，元素肯无法获取到，而使用v-show一定可以获取到