vue中v-fro

<script>
export default {
  data() {
    return {
      persion: ['zhansan', 'lisi', 'wangwu'],
      parentMessage: 'Parent',
      items: [{ message: 'Foo' }, { message: "Bar" }],
      persionObj: {
        name: 'zhansan',
        age: 19,
        sex: 'man'
      },
      numList:[1,10,4,8,9]
    }
  },
  methods: {
    changeList: function () {
      // 通过索引值去修改数组,v3中可以使用
      // this.numList[1]=80
      // push() 在末尾添加
      // this.numList.push(10)
      // pop() 删除最有一个元素
      // this.numList.pop()
      // shift()删除数组第一个元素

      // unshift() 在数组头部添加元素
      // this.numList.unshift(1,2,2,4)
      // splice()删除 插入 替换元素
      // 第一个元素表示删除/插入的位置下表
      // 删除：
      // 第二个元素：表示要删除的个数，如果没有传着则删除到最后
      // 插入：
      // 第二个元素：传入0，并且后面接上要出入的元素
      // this.numList.splice(2,0,3,4,4,4)
      // 替换
      // 第二个元素：替换的个数，后面接上要替换的元素
      // this.numList.splice(1,3,2,3,3)
      // sort()给数组排序,默认从小到打排序
      // this.numList.sort()
      // this.numList.sort((a,b)=>a-b)从小到大
      // this.numList.sort((a,b)=>b-a)从大到小
      // reverse()翻转
      // this.numList.reverse()
    }
  }
}
</script>
<template>
  <div>
    <!-- v-for可以使用于数组，item代表数组中每一个元素 index代表数组下标不 -->
    <ul>
      <li v-for="(item, index) in persion"> {{ index }}--{{ item }}</li>
    </ul>

    <ul>
      <li v-for="(item, index) in persion" :key="index"> {{ index }}--{{ item }}</li>
    </ul>

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

    <!-- v-for 循环对象 item为键值 key为键名 -->
    <ul>
      <li v-for="(item, key, index) in persionObj" :key="key">{{ index }} -- {{ key }} --{{ item }}</li>
    </ul>
    <div>
      循环persion
    </div>
    <ul>
      <!-- 为了给 Vue 一个提示，以便它可以跟踪每个节点的标识，从而重用和重新排序现有的元素，你需要为每个元素对应的块提供一个唯一的 key attribute -->
      <li v-for="(item, index) in persion" :key="item">
        <input type="checkbox" name="" id="" /> {{ index }} -- {{ item }}
      </li>
    </ul>
    <button @click="persion.unshift('zhaoliu')">添加元素</button>
  </div>

  <div>
    <!-- v-for 可以直接接受一个整数值。在这种用例中，会将该模板基于 1...n 的取值范围重复多次。 -->
    <span v-for="n in 10">{{ n }}</span>
  </div>
  <div>
    <ul>
      <li v-for="item in numList">{{ item }}</li>
    </ul>
  </div>
  <button @click="changeList">修改数组</button>
</template>