列表渲染 Vue2.0与Vue1.0的区别

v-for：  v-for 指令需要以 item in items 形式的特殊语法， items 是源数据数组并且 item 是数组元素迭代的别名。

基本用法：

    

        `item`
    

new Vue({
    el:'#app',
    data:{
        arr:['apple','banana','cherry','durain']
    }
})

这种写法类似Javascript种的关联数组，key 和 value，item就相当于数组的value。那数组的下标是否也能打出来呢？

    

        {{$index}} `item`
    

同理，如果是对于一个对象呢？

    

        {{$index}} {{$key}} `item`
    

new Vue({
    el:'#app',
    data:{
        obj:{'a':'apple','b':'banana','c':'cherry'}
    }
})

一样可以取到对应的下标，key值和value值

那如果在页面上有一个按钮，点击一下就添加一个列表项出来怎么实现呢？

    添加
    删除
    

        {{$index}} `item`
    

new Vue({
    el:'#app',
    data:{
        arr:['apple','banana','cherry','durain']
    },
    methods:{
        add:function(){
            this.arr.push('watermelon')
        },
        delete:function(){
            this.arr.splice(0,1)
        }
    }
})

点击添加按钮的时候，在数组的末尾添加一个子项；点击删除按钮的时候，把数组的第一项删掉

 

我们用 v-for 指令根据一组数组的选项列表进行渲染。 v-for 指令需要以 item in items 形式的特殊语法， items 是源数据数组并且 item 是数组元素迭代的别名。

在 v-for 块中，我们拥有对父作用域属性的完全访问权限。 v-for 还支持一个可选的第二个参数为当前项的索引。

    {{$index}}-`parentMsg` `item`.`msg`

Vue.js 1.0.17及以后版本支持of分隔符，更接近 JavaScript 遍历器的语法：