用于循环的数组里面的值可以是对象,也可以是普通元素
<ul id="example-1">
<!-- 循环结构-遍历数组
item 是我们自己定义的一个名字 代表数组里面的每一项
items对应的是 data中的数组-->
<li v-for="item in items">
{{ item.message }}
</li>
</ul>
<script>
new Vue({
el: '#example-1',
data: {
items: [
{ message: 'Foo' },
{ message: 'Bar' }
],
}
})
</script>
• 不推荐同时使用 v-if 和 v-for
• 当 v-if 与 v-for 一起使用时,v-for 具有比 v-if 更高的优先级。
<div v-if='v==13' v-for='(v,k,i) in obj'>{{v + '---' + k + '---' + i}}</div>
<script>
new Vue({
el: '#example-1',
data: {
items: [
{ message: 'Foo' },
{ message: 'Bar' }
],
obj: {
uname: 'zhangsan',
age: 13,
gender: 'female'
}
}
})
</script>
• key 的作用
o key来给每个节点做一个唯一标识
o key的作用主要是为了高效的更新虚拟DOM
<ul>
<li v-for="item in items" :key="item.id">...</li>
</ul>
遍历作用域插槽
<template slot-scope="scope">
<el-link
:underline="false"
type="primary"
v-for="(item,id) in scope.row.questionIDs"
:key="id"
@click="preview"
>
{{item.number}}
</el-link>
</template>
网友评论