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元素里。