Vue3学习系列之《列表渲染》

Vue的列表渲染指令为：v-for

1.v-for指令

v-for 指令是基于一个数组来渲染一个列表，其形式为：

v-for="item in items"

其中，items数组，item是数组迭代的子项。如下所示：


data(){
  return {
    nums: [1,2,3]
  }
}


<ul>
    <li v-for="item in nums" :key="item">{{item}}li>
ul>

在 v-for 中可以完整地访问父作用域内的属性和变量。

v-for 支持使用可选的第二个参数表示当前项的位置索引

v-for="(item, index) in items"

如下：


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

运行效果为：

0 - 1
1 - 2
2 - 3

v-for可以遍历一个对象的所有属性。形式为：

v-for="(value, key, index) in object"

key：表示属性名

value：属性值

遍历的顺序会基于对该对象调用 Object.keys() 的返回值来决定。如下所示：


data(){
  return {
    person:{
      name: "lucky",
      age: 18,
      address: "China"
    }
  }
}


<ul>
    <li v-for="(value, key, index) in person" :key="key">
        {{index}}: {{key}} - {{value}}
    li>
ul>

运行效果为：

0: name - lucky
1: age - 18
2: address - China

v-for 可以直接接受一个整数值。在这种用例中，会将该模板基于 1...n 的取值范围重复多次。

<span v-for="n in 6" :key="n">{{ n }}span>

运行效果为：

123456

`push()`	在数组末尾添加元素
`pop()`	删除数组末位的元素
`shift()`	删除数组首位元素
`unshift()`	在数组首位添加一个元素
`splice()`	表示删除元素、插入元素和替换远古三第一个参数表示开始删除、插入或者替换元素的位置下标删除元素：splice(参数1，参数2），参数2表示要删除几个元素，如果参数2不写的话，表示会删除后面的所有元素插入元素：splice(参数1,0,参数3...) 这里参数2传入0表示不删除元素（即插入元素），后面再跟要插入的数值替换元素：splice(参数1，参数2，参数3...) 这里参数2填非0，表示要替换几个元素，后面跟要替换的数值
`sort()`	排序数组，默认从小到大
`reverse()`	翻转数组