vue.js v-for

循环列表

var example1 = new Vue({
  el: '#example-1',
  data: {
    items: [
      { message: 'Foo' },
      { message: 'Bar' }
    ]
  }
})

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

index是该元素的索引

<ul id="example-2">
  <li v-for="(item, index) in items">
    {{ parentMessage }} - {{ index }} - {{ item.message }}
  </li>
</ul>

循环字典

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

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

vue数组操作

变异方法

注意下面两个都不是响应式的,
1.当你利用索引直接设置一个项时，例如：vm.items[indexOfItem] = newValue
2.当你修改数组的长度时，例如：vm.items.length = newLength
所以要使用下面的方法代替
1.Vue.set(vm.items, indexOfItem, newValue)
2.vm.items.splice(newLength)

push()
pop()
shift()
unshift()
splice()
sort()
reverse()

非变异方法

filter()
concat()
slice()

对象数据操作

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

vm.b = 2
// `vm.b` 不是响应式的

响应式的要使用
Vue.set(vm.userProfile, 'age', 27)

<template>