快上网专注成都网站设计 成都网站制作 成都网站建设
成都网站建设公司服务热线:028-86922220

网站建设知识

十年网站开发经验 + 多家企业客户 + 靠谱的建站团队

量身定制 + 运营维护+专业推广+无忧售后,网站问题一站解决

Vue渲染列表指令v-for如何使用

这篇文章主要讲解了“Vue渲染列表指令v-for如何使用”,文中的讲解内容简单清晰,易于学习与理解,下面请大家跟着小编的思路慢慢深入,一起来研究和学习“Vue渲染列表指令v-for如何使用”吧!

成都创新互联专注为客户提供全方位的互联网综合服务,包含不限于网站建设、成都做网站、交口网络推广、微信小程序开发、交口网络营销、交口企业策划、交口品牌公关、搜索引擎seo、人物专访、企业宣传片、企业代运营等,从售前售中售后,我们都将竭诚为您服务,您的肯定,是我们最大的嘉奖;成都创新互联为所有大学生创业者提供交口建站搭建服务,24小时服务热线:18980820575,官方网址:www.cdcxhl.com

Vue渲染列表指令v-for如何使用

v-for 的作用


v-for可以基于源数据多次渲染元素或模板块。这个指令必须用特定的语法alias in expression,为当前遍历的元素提供别名:

 {{ alias }}

一般都是给数组或对象指定别名,除此之外还可以为索引值指定别名,对于对象还可以给value指定别名,常见的几种情形如下:

{{ item }}
{{ item }} {{ index }}

其中我们也可以把in换成of作为分隔符,因为它是最接近JavaScript迭代器的语法。

v-for的默认行为试着不改变整体,而是替换元素。迫使其重新排序的元素,你需要提供一个key的特殊属性:

 {{ item.text }}

接下来,我们看看v-for的一些使用场景。

一个数组的 v-for


使用v-for指令把数组的选项列表进行渲染。v-for指令需要使用item in items形式的特殊语法,items是源数据数组,item是数组元素迭代的别名。来看一个简单的示例:


        {{ item }}
// JavaScript var app = new Vue({     el: '#app',     data: {         items: [1, 34, 89, 92, 45, 76, 33]     } })

这个时候,数组items的每个item渲染到对应的li中,在浏览器看到的效果如下:

Vue渲染列表指令v-for如何使用

上面的例子是通过v-for把数组items的每个项迭代出来放到li中,除此之外,还可以把数组的每个index也遍历出来。在上面的代码的基础上,咱们修改一下模板:

        index-{{ index }}: {{ item }}

这个时候数组的索引号也遍历出来了:

Vue渲染列表指令v-for如何使用

从上面的示列看出来了,你需要哪个元素(HTML的标签)循环,那么v-for就写在那个元素上。

上面我们已经可以正常的使用v-for将定义的数组每一项输出来。为了加深学习,咱们在上面的示例基础上增加一项需求,就是对输出的数组进行排序。这个时候,咱们需要使用到Vue中的computed属性。

在Vue中,我们不能污染源数据,如果我们直接对源数据items通过sort()方法进行排序,将会报错的:

var app = new Vue({
    el: '#app',
    computed: {
        items: function() {
            return this.items.sort()
        }
    },
    data: {
        items: [1, 34, 89, 92, 45, 76, 33]
    }
})

Vue渲染列表指令v-for如何使用

为了不会污染Vue中的源数据,需要在computed里重新声明一个对象,比如声明一个sortItems对象:

var app = new Vue({
    el: '#app',
    computed: {
        sortItems: function() {
            return this.items.sort()
        }
    },
    data: {
        items: [1, 34, 89, 92, 45, 76, 3, 12]
    }
})

这个时候,我们的模板也需要做对应的修改:

        {{ item }}

如果不出意外的话,你看到的效果将是这样的:

Vue渲染列表指令v-for如何使用

虽然有变化了,但不是我们想要的排序结果。虽然结果不是我们想要的,但这并不是Vue自身的问题,在JavaScript中也是这样。如果我们要想真正的实现一个排序效果,那么需要添加一个JavaScript的数组的排序函数的功能:

function sortNumber(a, b) {
    return a - b
}

computed里的代码也做一个相应的修改:

computed: {
    sortItems: function() {
        return this.items.sort(sortNumber)
    }
}

这相输出的效果才真正的是一个正确的排序效果:

Vue渲染列表指令v-for如何使用

上面的例子,我们看到的是是一个简单的纯数字之类的数组,其其数组中的每个项也可以是对象,比如:

data: {
    objItems: [
        {
            firstName: 'Jack',
            lastName: 'Li',
            age: 34
        },
        {
            firstName: 'Airen',
            lastName: 'Liao',
            age: 18
        }
    ]
}

我们把模板换成:

 {{ objItem.firstName }} {{objItem.lastName}} is {{ objItem.age}} years old!

这个时候看到的效果如下:

Vue渲染列表指令v-for如何使用

在JavaScript中,我们有很多数组的方法,可以对数组进行操作,这些方法可以修改一个数组。其实,在Vue中同样包含一组观察数组变异方法,这些方法将会触发元素的重新更新(视图更新),这些方法也是JavaScript中数组中常看到的方法:push()pop()shift()unshift()splice()sort()reverse()。我们可以在控制台中简单的看一下前面的示例中items数组调用变异方法的效果:

Vue渲染列表指令v-for如何使用

Vue不但提供了数组变异的方法,还提供了替换数组的方法。变异方法可以通过些方法的调用修改源数据中的数组;除此之外也有对应的非变异方法,比如filter()concat()slice()等。这些方法是不会改变源数据中的原始数组,但总是返回一个新数组。当使用这些方法时,可以用新数组替换旧数组。

由于JavaScript的限制,Vue不能检测以下变动的数组:

  • 当你利用索引直接设置一个项时,例如app.items[indexOfItem] = newValue

  • 当你修改数组的长度时,例如: app.items.length = newLength

为了解决第一类问题,以下两种方式都可以实现和app.items[indexOfItem = newValue相同的效果,同时也将触发状态更新:

Vue.set(app.items, indexOfItem, newValue)

app.items.splice(indexOfItem, 1, newValue)

为了解决第二类问题,你可以使用splice():

app.items.splice(newLength)

对象的 v-for


v-for除了可以使用在数组上之外还可以应用在对象上。


        {{ value }}
// JavaScript obj: {     firstName: 'Airen',     lastName: 'Liao',     age: 30 }

使用v-for可以把obj的每个key对应的value值遍历出来,并且填到对应的li元素中。效果如下:

Vue渲染列表指令v-for如何使用

你也可以给对象的key遍历出来:

        {{ key }}: {{ value }}

效果如下:

Vue渲染列表指令v-for如何使用

同样,也可以类似数组一样,可以把index索引做为第三个参数:

        {{ index }}. {{ key }}: {{ value }}

Vue渲染列表指令v-for如何使用

前面提到过,数组可以变异,但对于对象而言,Vue不能检测对象属性的添加或删除。这主要也是由于JavaScript的限制。不过在Vue中,对于已经创建好的实例,可以使用Vue.set(object, key, value)方法向嵌套对象添加响应式属性。例如:

var app = new Vue({
    data: {
        obj: {
            name: 'Airen'
        }
    }
})

可以使用类似下面的方式,给obj对象添加一个新的属性age

Vue.set(app.obj, 'age', 27)

回到我们的示例中给数据源中的obj添加一个'from'key,而且其对应的value值为'江西'

Vue渲染列表指令v-for如何使用

除了Vue.set()之外,还可以使用app.$set实例方法,它其实就是Vue.set的别名:

mounted(){
    this.$set(this.obj, '职位', '码农')
}

Vue渲染列表指令v-for如何使用

这里用到了Vue中的mounted(),和computed一样,也不知道他在Vue中的作用,同样放到后面来。我们总是会搞明白的。

有时候你可能需要为已有对象赋予多个新属性,比如使用Object.assign()_.extend()。在这种情况下,应该用两个对象的属性创建一个新的对象。所以,如果你想添加新的响应式属性,不要像这样:

Object.assign(this.obj, {
    age: 27,
    favoriteColor: 'Vue Green'
})

应该这样做:

this.obj = Object.assign({}, this.obj, {
    age: 27,
    favoriteColor: 'Vue Green'
})

一段取值范围的 v-for


v-for也可以取整数。在这种情况下,它将重复多次模板:

        {{ n }}

结果如下:

Vue渲染列表指令v-for如何使用

v-for 和 一个