一起养成写作习惯！这是我参与「掘金日新计划 · 4 月更文挑战」的第10天，点击查看活动详情。

前言

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

正式开始

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

在以前的内容中，我们也接触过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');

同样是隐藏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>

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');

当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 条件渲染详解

前言

正式开始

总结