Vue 2.0学习笔记:v-for

特别声明:小站对部分原创文章已开启付费阅读,并开通年费VIP通道,年费价格为 ¥365.00元。如果您喜欢小站的内容,可以点击开通会员进行全站阅读。如果您对付费阅读有任何建议或想法,欢迎发送邮件至: airenliao@gmail.com!(^_^)

上一节,我们学习了在Vue中如何通过v-ifv-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: {
剩余80%内容付费后可查看
* 请输入阅读码(忘记阅读码?

如需转载,烦请注明出处:https://www.w3cplus.com/vue/v-for.html

如果文章中有不对之处,烦请各位大神拍正。如果你觉得这篇文章对你有所帮助,打个赏,让我有更大的动力去创作。(^_^)。看完了?还不过瘾?点击向作者提问!

赏杯咖啡,鼓励他创作更多优质内容!
返回顶部