重学Vue3 - 模板语法 - (5)

条件渲染

在某些情况下，我们需要根据当前的条件决定某些元素或组件是否渲染，此时就可以使用条件渲染

<div id="app">   <div v-if="users.length > 1">有多个嘉宾</div>   <div v-else-if="users.length === 1">只有一个嘉宾</div>   <div v-else>没有嘉宾</div> </div> 复制代码

v-if 的渲染是惰性的

• 当条件为false时，其判断的内容完全不会被渲染或者会被销毁掉

• 当条件为true时，才会真正渲染条件块中的内容

v-show

v-if 和 v-show 在功能上都是一致的, 都是根据一个条件决定是否显示元素或者组件

但是对于v-if, 当条件为false时，其对应的元素压根不会被渲染到DOM中

v-show元素无论是否需要显示到浏览器上，它的DOM实际都是有存在的，只是通过CSS的display属性来进行切换

所以对于需要在显示和隐藏之间频繁的切换的元素，推荐使用v-show

v-show是通过CSS的display属性来决定元素是否显示的，所以

1. v-show是不支持template的

2. v-show不可以和v-else一起使用

列表渲染

在真实开发中，我们往往会从服务器拿到一组数据，并且需要对其进行渲染

这个时候我们可以使用v-for来完成，v-for类似于JavaScript的for循环，可以用于遍历一组数据

v-for的基本格式是 "(item, index) in 数组"

• 数组通常是来自data或者prop，也可以是其他方式

• item是我们给每项元素起的一个别名，可以自定义设置

转自稀土掘金