Vue v-for

使用v-for把一个数组对应为一组元素用v-for指令根据一组数组的选项列表进行渲染v-for指令需要

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

块中，我们拥有对父作用域属性的完全访问限制

<ul>
<li v-for="item in items">
{{item.message}}
</li>

</ul>

var app = new Vue({
el:"#app",
data:{
items:[
{message:"for"},
{message:"bar"},
{message:"yor"}

]

}

v-for还支持一个可选的第二个参数作为当前项的索引：

<ul>

扫描二维码关注公众号，回复： 3255753 查看本文章

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

</li>

</ul>

 data: {
    parentMessage: 'Parent',
    items: [
      { message: 'Foo' },
      { message: 'Bar' }
    ]

输出结果的格式为：

parent - 0 - Foo

parent - 1 - Bar

也可以使用of来代替in

一个对象也可以使用v-for

<ul id="v-for-object" class="demo">
  <li v-for="value in object">
    {{ value }}
  </li>
</ul>

new Vue({
  el: '#v-for-object',
  data: {
    object: {
      firstName: 'John',
      lastName: 'Doe',
      age: 30
    }
  }
})

输出：

John

Doe

这里也可以提供第二个参数作为键名：

<div v-for="(value, key) in object">
  {{ key }}: {{ value }}
</div>

也可以提供第三个参数作为索引值：

<div v-for="(value, key, index) in object">
  {{ index }}. {{ key }}: {{ value }}
</div>

#key:

当Vue.js用v-for正在更新已经渲染过的元素列表的时候，它默认用就地复用策略

如果数据项发生改变。Vue将不会移动DOM元素来匹配数据项的顺序，而是简单

复用次数每个元素，并确保它在特定索引下显示已经被渲染过的每个元素。

这个模式是高效的，但是只是适用于不易来自组件状态或者临时DOM状态的列表

渲染输出。

为了让Vue能追踪每个节点的身份，从而重用和重新排序现有元素，你需要为每项

提供一个key属性，理想的key值是每项都有唯一的id，需要使用v-bind来绑定动态

值。

<div v-for="item in items" v-bind:key="item.id">
  <!-- 内容 -->
</div>

建议尽可能的在使用v-for的时候提供key的值，除非内容特别简单，或者刻意依赖默认

行为已获得性能上的提升

变异方法：

他们会触发视图的更新：push()，pop()，shift()，unshift()，splice()，sort()，reverse()

替换数组：

变异方法就是会改变被这些方法调用的原始数组，相比之下也有非变异方法

比如那些返回新的数组的方法：filter()过滤，concat()拼接，slice()切割

这些方法不会改变原数组，但是会返回一个新数组，当使用非变异方法的时候，

可以用新数组替换旧数组

example1.items = example1.items.filter(function (item) {
  return item.message.match(/Foo/)
})

并且这个操作是非常高效的

注意：

由于JavaScript的限制，Vue不能检测一下变动的数组：

1、当你利用索引直接设置一个项时，例如：vm.items[indexOfItem] = newValue

2、当你修改数组的长度的时候，比如：vm.items.length = newLength

举个例子：

var vm = new Vue({
  data: {
    items: ['a', 'b', 'c']
  }
})
vm.items[1] = 'x' // 不是响应性的
vm.items.length = 2 // 不是响应性的

解决第一类的问题：

// Vue.set
Vue.set(vm.items, indexOfItem, newValue)

// Array.prototype.splice
vm.items.splice(indexOfItem, 1, newValue)

vm.$set(vm.items, indexOfItem, newValue)

解决第二类问题:

vm.items.splice(newLength)

猜你喜欢