特别声明:如果您喜欢小站的内容,可以点击申请会员进行全站阅读。如果您对付费阅读有任何建议或想法,欢迎发送邮件至: airenliao@gmail.com!或添加QQ:874472854(^_^)
上一节,我们学习了在Vue中如何通过v-if
和v-show
根据条件渲染所需要的DOM元素或者模板。在实际的项目中,我们很多时候会碰到将JSON数据中的数组或对象渲染出列表之类的元素。在Vue中,提供了一个v-for
的指令,可以渲染列表。
v-for
的作用
v-for
可以基于源数据多次渲染元素或模板块。这个指令必须用特定的语法alias in expression
,为当前遍历的元素提供别名:
<div v-for="alias in expression"> {{ alias }}</div>
一般都是给数组或对象指定别名,除此之外还可以为索引值指定别名,对于对象还可以给value
指定别名,常见的几种情形如下:
<div v-for="item in items">{{ item }}</div>
<div v-for="(item, index) in items">{{ item }} {{ index }}</div>
<div v-for="val in object"></div>
<div v-for="(val, key) in object"></div>
<div v-for="(val, key, index) in object"></div>
其中我们也可以把in
换成of
作为分隔符,因为它是最接近JavaScript迭代器的语法。
v-for
的默认行为试着不改变整体,而是替换元素。迫使其重新排序的元素,你需要提供一个key
的特殊属性:
<div v-for="itme in items" :key="item.id"> {{ item.text }}</div>
接下来,我们看看v-for
的一些使用场景。
一个数组的 v-for
使用v-for
指令把数组的选项列表进行渲染。v-for
指令需要使用item in items
形式的特殊语法,items
是源数据数组,item
是数组元素迭代的别名。来看一个简单的示例:
<!-- Template -->
<ul>
<li v-for="item in items">{{ item }}</li>
</ul>
// JavaScript
var app = new Vue({
el: '#app',
data: {
items: [1, 34, 89, 92, 45, 76, 33]
}
})
这个时候,数组items
的每个item
渲染到对应的li
中,在浏览器看到的效果如下:
上面的例子是通过v-for
把数组items
的每个项迭代出来放到li
中,除此之外,还可以把数组的每个index
也遍历出来。在上面的代码的基础上,咱们修改一下模板:
<ul>
<li v-for="(item, index) in items">index-{{ index }}: {{ item }}</li>
</ul>
这个时候数组的索引号也遍历出来了:
从上面的示列看出来了,你需要哪个元素(HTML的标签)循环,那么v-for
就写在那个元素上。
上面我们已经可以正常的使用v-for
将定义的数组每一项输出来。为了加深学习,咱们在上面的示例基础上增加一项需求,就是对输出的数组进行排序。这个时候,咱们需要使用到Vue中的computed
属性。那么computed
属性是做什么的,我也不清楚,咱们一起先不去了解他吧,记作Vue有这么一个属性。随着后面的学习,我们会明白computed
的用处的。
在Vue中,我们不能污染源数据,如果我们直接对源数据items
通过sort()
方法进行排序,将会报错的:
var app = new Vue({
el: '#app',
computed: {
items: function() {
return this.items.sort()
}
},
data: {
如需转载,烦请注明出处:https://www.w3cplus.com/vue/v-for.html
如果文章中有不对之处,烦请各位大神拍正。如果你觉得这篇文章对你有所帮助,打个赏,让我有更大的动力去创作。(^_^)。看完了?还不过瘾?点击向作者提问!