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

我们使用v-for指令根据一组数组的选项列表进行渲染，v-for指令需要使用item in items这样的特殊语法，items是源数据，item是根据源数据迭代的别名

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

var example1 = 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' }
    ]
  }
})

可以使用of替代in作为分隔符

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

一个对象的v-for

可以使用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
    }
  }
})

可以使用第二个键名的参数：

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

在对象的循环中第三个参数为索引

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

在遍历对象的时候是根据 ==Object.keys()== 的结果遍历，不能保证在不同的javascript引擎中是一致的。

key

vue.js对于list默认渲染模式是高效的，但是只适用于 不依赖子组件状态或临时dom状态(例如表单输入值)的列表渲染输出。

为了给vue一个识别每个节点身份，从而重新排序现有元素，需要给每项提供一个key，理想的key是每项都有一个唯一的id，它的工作方式类似一个属性，可以用v-bind进行动态绑定值

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

尽可能在使用v-for时提供key，除非内容非常简单或者刻意依赖默认行为获取性能上的提升

==不要使用数组或对象中的非原始类型值作为key== 用字符串或数类型的值代替

数组更新检测

#变异方法

Vue包含了观察数组变化的变异方法，所以他们也将触发视图更新，方法如下：

• 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 // 不是响应性的

为解决这两种问题，使用以下方法可以实现和 ==vm.items[indexOfItem] = newValue== 相同的方法并且同时触发状态更新:

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

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

也可以使用 ==vm.$set== 实例方法，该方法是全局方法 ==Vue.set== 的一个别名：

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

为解决第二个问题可以使用splice

vm.items.splice(newLength)

对象更改检测注意事项

由于JavaScript的限制vue 不能检测对象属性的增加或删除

var vm = new Vue({
  data: {
    a: 1
  }
})
// `vm.a` 现在是响应式的
vm.b = 2
// `vm.b` 不是响应式的

对于已经创建的实例，vue不能动态的添加根级别的响应式属性，可以使用Vue.set(object, key, value)方法向嵌套对象添加相应式属性，例如：

var vm = new Vue({
  data: {
    userProfile: {
      name: 'Anika'
    }
  }
})

可以添加新的age到嵌套的userProfile中

Vue.set(vm.userProfile, 'age', 27)

也可以使用vm.$set实例方法，他是全局Vue.set的别名

vm.$set(vm.userProfile, 'age', 27)

有时可能需要对现有的对象增加多个新的属性，这种情况下应该用两个对象的属性创建一个新的对象。

vm.userProfile = Object.assign({}, vm.userProfile, {
  age: 27,
  favoriteColor: 'Vue Green'
})

反例：

Object.assign(vm.userProfile, {
  age: 27,
  favoriteColor: 'Vue Green'
})

显示过滤/排序效果

有时我们需要显示过滤或排序后的副本而不实际的去改变原始数据，这种情况下可以创建返回过滤排序数组的计算属性,例：

<li v-for="n in evenNumbers">{{ n }}</li>

data: {
  numbers: [ 1, 2, 3, 4, 5 ]
},
computed: {
  evenNumbers: function () {
    return this.numbers.filter(function (number) {
      return number % 2 === 0
    })
  }
}

在计算属性不适用的情况下可以使用一个method方法：

<li v-for="n in even(numbers)">{{ n }}</li>

data:{
    numbers:[1,2,3,4,5,6,7,8]
},
methods:{
    even:function(numbers){
        return numbers.filter(function(number){
            return number%3==0
        })
    }
}

一段取值范围的v-for

v-for可以取整，这种情况下将会重复多次模板

<li v-for="n in 10">{{n}}</li>

v-for on a < template>

可以利用带v-for的template渲染多个元素

<template v-for="item in items">
    <li>{{ item.msg }}</li>
    <li class="divider" role="presentation">11</li>
</template>

v-for with v-if

不推荐同时使用v-for和v-if，他们处于同一个节点的时候，v-for的优先级比v-if要高，当你想为仅有的一些项渲染节点的时候，这种优先级机制十分有用。

如果你的目的是跳过整个循环的话，就需要v-if写在v-for外面。

一个组件的v-for

在自定义组件中可以像普通元素一样使用v-for

在2.2.0版本后，当组件使用v-for时，key是必须要存在的

<my-component v-for="item in items" :key="item.id"></my-component>

任何数据都不会自动传递到组件中去，因为组件有自己独立的作用域，为了吧迭代的数据传到组件中，我们需要用到props

<my-component
  v-for="(item, index) in items"
  v-bind:item="item"
  v-bind:index="index"
  v-bind:key="item.id"
></my-component>

Vue.component("my-component",{
    props:["item"],
    template:"<li>{{item}}</li>"
})

不自动将item传递到组件中的原因是，这样会使得组件与v-for的运作紧密耦合，明确组件数据来源能够使组件在其他场合重复使用。

<div id="test1" >
    <form @submit.prevent="addNewTodo">
        <label for="new-todo">Add Todo</label>
        <input v-model="nextName" id="new-todo" placeholder="请输入..." />
        <button>add</button>
    </form>
    <ul>
      <li is="my-component"
          v-for="(item, index) in items"
          v-bind:item="item"
          v-bind:index="index"
          v-bind:key="item.id"
        ></li>
    </ul>
</div>

Vue.component("my-component",{
    props:["item"],
    template:"<li>{{item.id}}:{{item.name}}</li>"
})
var test1=new Vue({
    el:"#test1",
    data:{
        nextName:"",
        nextId:3,
        items:[{id:1,name:"test1"},{id:2,name:"test2"}]
    },
    methods:{
        addNewTodo:function(){
            this.items.push({
                id:this.nextId++,
                name:this.nextName
            })
            this.nextName="";
        }
    }
})

这里的is="my-component"属性，这种做法使用dom模板时十分必要，因为ul标签中只有li元素才能被看成有效标签，这样做的效果与相同，但是可以避开一些潜在的浏览器解析错误。