v-for

• 一个数组对应一组元素

  <ul id="list">
      <li v-for="animal in animals">
          {{animal.name}}
      </li>
  </ul>
  

  var vm = new Vue({
      el: '#list',
      data: {
          animals:[
              {name:'狮子'},
              {name:'黑豹'},
              {name:'小猪'},
          ]
      },
  })
  

  第二个参数：索引

  <li v-for="(animal,i) in animals">
      {{i}}-{{animal.name}}
  </li>
  

• 使用对象遍历属性值

  <li v-for="info in lion">
      {{info}}
  </li>
  

  data: {
      lion:{
          name:'king',
          age:3,
          character:'violent'
      }
  },
  

  第二个参数：属性名称

  <li v-for="(info,name) in lion">
      {{name}}：{{info}}
  </li>
  

  第三个参数：索引

  <li v-for="(info,name,i) in lion">
      {{i}}：{{name}}：{{info}}
  </li>
  

• 维护状态

  key用于跟踪每个节点的身份。

  <li v-for="animal in animals" :key="animal.id">
      {{animal.name}}
  </li>
  

  data: {
  	animals:[
  		{name:'狮子',id:1},
  		{name:'黑豹',id:2},
  		{name:'小猪',id:3},
  	]
  },
  

• 可以在<template>和组件上使用，在组件是必须加上key

数组更新

• push(元素)：从数组末尾添加元素
• pop()：从数组中删除最后一个元素
• shift()：从数组中删除第一个元素
• unshift(元素)：从数组开头添加元素
• splice(开始位置,移除个数，要添加（替换）的元素)：对数组进行删除替换添加元素的操作
• sort()：排列
• reverse()：颠倒数组元素的位置

• filter()：返回符合标准的元素，返回新数组。如：arr.filter(item=>item.length>6)

• concat()：合并数组，然后新数组。如：arr1.concat(arr2)

• slice(开始索引，结束索引)：抽取数组，返回新数组。如：arr.slice(2, 4)

显示过滤/排序后的结果

• 如果想要在不改变原数组的情况下显示过滤/排序后的结果，可以创建一个计算属性

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

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

• 如果是嵌套v-for，可以使用方法：

  <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(number=>{
        return number % 2 === 0
      })
    }
  }