Vue-列表渲染

v-for遍历数组和对象

• 数组：item in items
• 对象：(value, name, index) in object

<ul id="app">
  <!--遍历数组 可选参数index-->
  <!--item in items同义item of items-->
  <li v-for="item, index in items":key="item.message">
    {{parentMessage}} - {{index}} - {{item.message}}
  </li>
  <!--遍历对象 可选参数value name index-->
  <li v-for="(value, name, index) in object">
    {{index}}. {{name}}: {{value}}
  </li>
</ul>

<script>
  var app = new Vue({
    el: '#app',
    data: {
      parentMessage: 'parent',
      items: [
        {message: 'aaa'},
        {message: 'bbb'},
      ],
      object: {
        title: 'How to do lists in Vue',
        author: 'jane doe',
        publishedAt: '2016-04-10'
      }
    }
  })
</script>

维护状态
当 Vue 正在更新使用 v-for 渲染的元素列表时，它默认使用“就地更新”的策略。如果数据项的顺序被改变，Vue 将不会移动 DOM 元素来匹配数据项的顺序，而是就地更新每个元素，并且确保它们在每个索引位置正确渲染。
这种方法高效，但只适用于不依赖子组件状态或临时 DOM 状态 (例如：表单输入值) 的列表渲染输出。
为了给 Vue 一个提示，以便它能跟踪每个节点的身份，从而重用和重新排序现有元素，你需要为每项提供一个唯一 key attribute：

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

不要使用对象或数组之类的非基本类型值作为 v-for 的 key。请用字符串或数值类型的值。

数组更新检测（数据结构中封装好的方法，增删查改）

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

example1.items.push({ message: 'Baz' })

这三种方法替换为新的数组

• filter()
• concat()
• slice()

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

显示过滤/排序后的结果

<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
    })
  }
}

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

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

显示整数

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

和template共用

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

v-for和v-if公用
当它们处于同一节点，v-for 的优先级比 v-if 更高，这意味着 v-if 将分别重复运行于每个 v-for 循环中。可以在v-for 外部使用 v-if 以跳过循环

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

在组件上使用v-for

<div id="todo-list-example">
  <form v-on:submit.prevent="addNewTodo">
    <label for="new-todo">Add a todo</label>
    <input
      v-model="newTodoText"
      id="new-todo"
      placeholder="E.g. Feed the cat"
    >
    <button>Add</button>
  </form>
  <ul>
    <li
      is="todo-item"
      v-for="(todo, index) in todos"
      v-bind:key="todo.id"
      v-bind:title="todo.title"
      v-on:remove="todos.splice(index, 1)"
    ></li>
  </ul>
</div>

Vue.component('todo-item', {
  template: '\
    <li>\
      {{ title }}\
      <button v-on:click="$emit(\'remove\')">Remove</button>\
    </li>\
  ',
  props: ['title']
})

new Vue({
  el: '#todo-list-example',
  data: {
    newTodoText: '',
    todos: [
      {
        id: 1,
        title: 'Do the dishes',
      },
      {
        id: 2,
        title: 'Take out the trash',
      },
      {
        id: 3,
        title: 'Mow the lawn'
      }
    ],
    nextTodoId: 4
  },
  methods: {
    addNewTodo: function () {
      this.todos.push({
        id: this.nextTodoId++,
        title: this.newTodoText
      })
      this.newTodoText = ''
    }
  }
})