在某些情况下,我们需要根据当前的条件决定某些元素或组件是否渲染,此时就可以使用条件渲染
<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-if 和 v-show 在功能上都是一致的, 都是根据一个条件决定是否显示元素或者组件
但是对于v-if
, 当条件为false时,其对应的元素压根不会被渲染到DOM中
v-show元素无论是否需要显示到浏览器上,它的DOM实际都是有存在的,只是通过CSS的display属性来进行切换
所以对于需要在显示和隐藏之间频繁的切换的元素,推荐使用v-show
v-show是通过CSS的display属性来决定元素是否显示的,所以
v-show是不支持template的
v-show不可以和v-else一起使用
在真实开发中,我们往往会从服务器拿到一组数据,并且需要对其进行渲染
这个时候我们可以使用v-for来完成,v-for类似于JavaScript的for循环,可以用于遍历一组数据
v-for的基本格式是 "(item, index) in 数组"
数组通常是来自data或者prop,也可以是其他方式
item是我们给每项元素起的一个别名,可以自定义设置
转自稀土掘金