6、列表渲染


title: 6、列表渲染
date: 2017-08-1 18:38:20
tags: vue笔记(妙味)


遍历数组

for指令根据一组数据的选项列表进行渲染,需要以item in tiems或item of tiems形式的特殊写法,item是数组的每一项,items是源数据数组。也有(item,index) in items的写法index是该item在数组中的索引。实际就是用for去遍历items数组。

  • {{ index }} - {{ item.message }}
var app = new Vue({
    el: '#example-1',
    data:{
        items:[
            {message:'foo'},
            {message:'bar'}
        ]
    }
})

这里items是一个数组。

遍历对象

遍历的数据不仅可以是数组形式,也可以是对象的形式。

  • {{ value }}
  • {{key}} : {{ value }}
  • {{ index }} : {{ key }} : {{ value }}
var app = new Vue({
    el: '#app',
    data: {
        object: {
            firstName: 'John',
            lastName: 'Doe',
            age: 30
        }
    }
})

也可以不通过数据去遍历,比如:

  • {{ n }}
var app = new Vue({
    el: '#app'
})

这样最终就是10个

  • 元素,内容分别就是1-10的数字。

    通过模板渲染

    v-for也可以通过模板渲染,而不是直接写在展示在页面中的html元素里。