Vue3基础+代码语法+例子大全（四）——条件渲染、列表渲染

参考官网：Vue.js - 渐进式 JavaScript 框架 | Vue.js (vuejs.org)

六、条件渲染

1、v-if

v-if 指令用于条件性地渲染一块内容。这块内容只会在指令的表达式返回真值时才被渲染。

export default {
    data(){
        return{
            age:15
        }
    }
}

<!-- 只显示第一个“你好” -->
<p v-if="true">我已经成年了</p> 
<p v-if="false">我还是小孩</p>

<!-- 判断age -->
<p v-if="age>=18">我已经成年了</p> 
<p v-if="age<18">我还是小孩</p>

（1）<template>上的 v-if

因为 v-if 是一个指令，他必须依附于某个元素。但如果我们想要切换不止一个元素呢？在这种情况下我们可以在一个 <template> 元素上使用 v-if，这只是一个不可见的包装器元素，最后渲染的结果并不会包含这个 <template> 元素。

<template>
    <div>
        <!-- 在 <template> 元素上使用 v-if 条件渲染分组 -->
        <!-- 满足条件，才能显示 template 标签里的内容 -->
        <template v-if="age>=18">
            <p>hello</p>
        </template>
    </div>
</template>

（2）v-else

一个 v-else 元素必须跟在一个 v-if 或者 v-else-if 元素后面，否则它将不会被识别。

<!-- 使用v-else -->
<p v-if="age>=18">我已经成年了</p> 
<p v-else>我还是小孩</p>

（3）v-else-if

v-else-if 提供的是相应于 v-if 的“else if 区块”，它可以连续多次重复使用。和 v-else 类似，一个使用 v-else-if 的元素必须紧跟在一个 v-if 或一个 v-else-if 元素后面。

<!-- 使用v-else-if -->
<p v-if="age>18">我已经成年了</p> 
<p v-else-if="age=18">今天刚好18岁</p>
<p v-else>我还是小孩</p>

2、v-show

v-show 用法基本一样：

<!-- v-show -->
<p v-show="sex=='man'">男生</p>
<p v-show="sex=='woman'">女生</p>

v-show 不支持在 <template> 元素上使用，也不能和 v-else 搭配使用。 

3、v-if  VS  v-show

v-if 是“真实的”按条件渲染，因为它确保了在切换时，条件区块内的事件监听器和子组件都会被销毁与重建。

v-if 也是惰性的：如果在初次渲染时条件值为 false，则不会做任何事。条件区块只有当条件首次变为 true 时才被渲染。

相比之下，v