目录

列表渲染🍡
数组更新🍡
对象更新🍡
隐藏元素🍡
条件渲染🍡

模板语法

列表渲染

### 数组- v-for="item in items"
### 数组- v-for="(item, index) in items"
### 对象- v-for="value in object"
### 对象- v-for="(value, key) in object"
### 对象- v-for="(value, key, index) in object

数组更新检测

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

数组替换--filter|concat|slice

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

数组更新其他

//取值-方式1
vm.items[indexOfItem] = newValue
//取值-方式2
Vue.set(vm.items, indexOfItem, newValue)
//取值-方式3
vm.$set(vm.items, indexOfItem, newValue)

对象更新检测

//Vue.set(object, key, value)
var vm = new Vue({
  data: {
    userProfile: {
      name: 'Anika'
    }
  }
});
//方式1
Vue.set(vm.userProfile, 'age', 27)
//方式2
vm.$set(vm.userProfile, 'age', 27)
//方式3
vm.userProfile = 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
    })
  }
}

显示一个数组的过滤或排序副本--使用属性方法

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

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

一段取值范围的 v-for

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

在<template>上使用 v-for

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

v-for with v-if 想为仅有的一些项渲染节点时

<li v-for="todo in todos" v-if="!todo.isComplete">
  {{ todo }}
</li>

v-for with v-if 想有条件地跳过循环的执行

<ul v-if="todos.length">
  <li v-for="todo in todos">
    {{ todo }}
  </li>
</ul>
<p v-else>No todos left!</p>