条件渲染
之前我们说过 v-if命令接收true/false后会对一个元素进行显示与否,但是当我们需要对多个元素进行切换时,我们就需要多个v-if了。因此Vue就提出了v-else/v-else-if。
假设我们一共三个元素,利用template标签。
<template v-if=' A === B'>
</template>
<template v-else-if=' A === C'>
</template>
<template v-else-if=' A === D'>
</template>
<template v-else>
</template>
这样就可以利用A不同的值来切换三种不同的元素。
v-if与v-for一起使用(不推荐,最好不用)
当 v-if 与 v-for 一起使用时,v-for 具有比 v-if 更高的优先级。
列表渲染
我们通常会使用v-for来遍历数组,从而展示一组列表。
<li v-for="item in items" :key="item.message">
{{ item.message }}
</li>
data:{
items:[
{ message: '123456' },
{ message: '654321' }
]
}
v-for 还支持一个可选的第二个参数
,即当前项的索引
。
v-for使用
类似于 v-if,你也可以利用带有 v-for 的 来循环渲染一段包含多个元素的内容。
<ul>
<template v-for="item in items">
<li>{{ item.msg }}</li>
</template>
</ul>
上面会依次显示数组的内容,若是往自定义组件内传递数组元素,并逐个显示出来,那么就需要key作为唯一标示。
<at-card v-for="info in Info"
:key="info.id"
:title="info.title"
:description="info.description"
:background="info.backgroud"
:router="info.router">
</at-card>