【Vue3从零开始-第二章】2-6 条件渲染详解

2022-09-26 157

版权

本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。

简介： 【Vue3从零开始-第二章】2-6 条件渲染详解

]UWOD(KIB9LJS9~S[T{QHM9.png

前言

在上一篇文章中，讲过了数据、方法、计算属性和侦听器，今天我们要深入了解一下vue的条件渲染。大家在之前的例子中也有用过，下面我们就详细的讲解一下。

正式开始

<script>
    const app = Vue.createApp({
        data(){
            return {
                show: false
            }
        },
        template: `<div v-if='show'>Hello World</div>`
    });
    const vm = app.mount('#root');
</script>
复制代码

}O[NDT}H~00X0ZLN)IDS64A.png

在以前的内容中，我们也接触过v-if指令，在v-if中绑定了一个数据值，根据这个数据值去判断当前DOM元素展示与否。

和v-if做一个类比的，还有另外一个指令v-show，这个指令也是用来判断DOM元素展示与否的，那么既然有了一个，为啥还要有另外一个同样的指令呢？下面就来对比一下这两个指令。

const app = Vue.createApp({
    data(){
        return {
            show: false
        }
    },
    template: `
        <div v-if='show'>Hello World</div>
        <div v-show='show'>Bye Bye</div>
    `
});
const vm = app.mount('#root');
复制代码

`M1V]84SFUZRB[ABV60ET}Y.png

同样是隐藏DOM元素，但是在浏览器中会发现，v-if直接不渲染DOM元素了，而v-show则会展示DOM元素，但是会通过行内样式去控制DOM元素的显隐。

如果频繁操作DOM元素的显隐时，就可以选择用v-show指令，因为它不会去频繁销毁DOM元素，对于性能会有好一点。

如果只是在页面初始化的时候操作DOM元素，或者操作DOM元素显隐的次数比较少，那么v-if和v-show就差不多了，根据各自的场景去选择就好了。

除了v-if和v-show之外，v-if还有额外的拓展语法。

<script>
    const app = Vue.createApp({
        data(){
            return {
                show: true
            }
        },
        template: `
            <div v-if='show'>If</div>
            <div>Else</div>
        `
    });
    const vm = app.mount('#root');
</script>
复制代码

PWR~2GVNDL3$XZ%T(K]H1`F.png

v-else表示和v-if相反的判断语句，当show的值为true时，则显示v-if中的DOM元素，反之显示v-else中的DOM元素。

v-else中无需携带任何参数，默认就是取v-if中的反向判断。

v-if和v-else两个指令在页面上使用时，必须呈现相邻的DOM元素，中间不能有额外的DOM元素相隔，否则会报错，具体错误信息可以自己尝试去看看哦~~

在v-if和v-else之间还有一个v-else-if指令，用来表示多层条件渲染。

const app = Vue.createApp({
    data(){
        return {
            showOne: false,
            showTwo: true
        }
    },
    template: `
        <div v-if='showOne'>If</div>
        <div v-else-if='showTwo'>Else-If</div>
        <div v-else>Else</div>
    `
});
const vm = app.mount('#root');
复制代码

C1LXVK{A$SEC6]}S0F{$71H.png

当showOne为false时，但是showTwo为true时，就会显示v-else-if中的DOM元素了。这些条件渲染语句和js中的条件渲染差不多，但是在vue底层中做了一些额外的判断，使得vue里面的条件判断语句更加灵活更加方便。

总结

在本篇文章中，详细介绍了vue里面的条件渲染指令v-if、v-show,还对这两个指令进行了对比。

当然还给v-if指令进行了拓展，v-else-if和v-else也是和v-if一起配套并且常用的条件判断指令。

【Vue3从零开始-第二章】2-6 条件渲染详解

前言

正式开始

总结

热门文章

最新文章

相关课程

相关电子书

探索云世界

热门

云计算

大数据

云原生

人工智能

数据库

开发与运维

活动广场

任务中心

训练营

直播

乘风者计划

下载

镜像站

技术资料

【Vue3从零开始-第二章】2-6 条件渲染详解

前言

正式开始

总结

热门文章

最新文章

相关课程

相关电子书