毕设：week11-vue.js：v-for

一、前言

当需要将一个数组遍历或枚举一个对象循环显示时，就会用到列表渲染指令v-for 。它的表达式需结合in 来使用，类似ite m in items 的形式

二、介绍

1.数组
<ul id="example-1">
  <li v-for="item in items">
    {{ item.属性名 }}
  </li>
</ul>

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

2.数组,可选的第二个参数为当前项的索引
  <ul id="example-1">
    <li v-for="(item,index) in items">
      {{ item.属性名 }}
    </li>
  </ul>

3.对象
  <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
      }
    }
  })
4.对象,提供第二个的参数为键名
  <div v-for="(value, key) in object" v-blind:key="key">
    {{ key }}: {{ value }}
  </div>
5.对象,提供第三个参数为索引
  <div v-for="(value, key, index) in object">
    {{ index }}. {{ key }}: {{ value }}
  </div>
注：建议尽可能在使用 v-for 时提供 key, v-bind:key
6.变异方法,Vue 包含一组观察数组的变异方法，所以它们也将会触发视图更新
    push() //添加到末尾
    pop()  //去除末尾数据
    shift() //去除首位数据
    unshift()//添加到首位数据
    splice()
    sort()  //排序
    reverse()//逆向

注：数组--由于 JavaScript 的限制，Vue 不能检测以下变动的数组
    1.当你利用索引直接设置一个项时，例如：vm.items[indexOfItem] = newValue.
      使用Vue.set(vm.items, indexOfItem, newValue)更新数据
    2.当你修改数组的长度时，例如：vm.items.length = newLength
      使用vm.items.splice(newLength) 修改数据

      对象--由于 JavaScript 的限制，Vue 不能检测对象属性的添加或删除
    1.Vue.set(object, key, value) 方法向嵌套对象添加响应式属性,添加数据
  
7.一段取值范围
  v-for 可以取整数
  <div>
      <span v-for="n in 10">{{ n }} </span>  // 1 2 3 4 5 6 7 8 9 10
  </div>
8.用<template>渲染v-for
  <ul>
    <template v-for="item in items">
          //语句体
    </template>
  </ul>