Vue学习的第七天

用v-for 把一个数组对应为一组元素

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

<ul id="example-1">

    <li v-for="item in items">

        {{item.message}}

    </li>

</ul>

var vm = new Vue({

    el:"#example-1",

    data:{

         items:[

              {message:'Foo'},

              {message:'Bar'}

        ]

    }

})

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

<ul id="example-2">

    <li v-for="(item, index) in items">

            {{parentMessage}}-{{index}}-{{item.message}}

    </li>

</ul>

var example2 = new Vue({

      el:"#example-2",

      data:{

           parentMessage:"Parent",

           items:[

               {message:"Foo"},

               {message:"Bar"}

          ]

    }

})

结果:

Parent-0-Foo

Parent-1-Bar

也可以用 of 替代 in 作为分隔符，因为它是最接近 JavaScript 迭代器的语法

<div v-for="item of items"></div>

一个对象的v-for

可以用v-for通过一个对象的属性来迭代

key为键名 index为索引

<ul id="example-3" class="demo">

    <li v-for="(value, key, index ) in object">

         {{value}}

    </li>

</ul>

var vm = new Vue({

     el:"#example-3",

     data:{

          object:{

               firstName:"John",

               lastName:"Doe",

               age:26

          }

    }

})

结果 

firstName:John

lastName:Doe

age:26

为了给 Vue 一个提示，以便它能跟踪每个节点的身份，从而重用和重新排序现有元素，你需要为每项提供一个唯一 key 属性。理想的 key 值是每项都有的且唯一的 id。但它的工作方式类似于一个属性，所以你需要用 v-bind 来绑定动态值 

<div v-for="item in items" :key="item.id">

...

</div>

数组更新检测

#变异方法 顾名思义，会改变被这些方法调用的原始数组

Vue包含一组观察数组的变异方法,所以它们也将会触发视图更新.

push() //添加最后一项

pop() //删除最后一项

shift() //删除第一项

unshift() //添加第一项

splice()

sort()

reverse()

#替换数组 , 不会改变原始数组，但总是返回一个新数组

filter()

concat()

slice()

例:

example.items = example.items.filter(function(item){

return item.meaa

})