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

目录

1.v-for指令

2.位置索引

3.v-for与对象

4.在v-for中使用范围值

5.在template上使用v-for

6.通过key管理状态

7.数组变化侦测

---

       

        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 中可以完整地访问父作用域内的属性和变量。

2.位置索引

        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

3.v-for与对象

        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

4.在v-for中使用范围值

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

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

        运行效果为：

123456

5.在template上使用v-for

        <template> 标签上可以使用 v-for 来渲染一个包含多个元素的块

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

6.通过key管理状态

        Vue默认按照“就地更新”的策略来更新渲染元素列表，不会跟踪每个节点。当元素列表顺序改变时，Vue不会随之移动DOM元素的顺序，默认模式是高效的，但是只适用于渲染的元素列表不依赖子组件状态或者临时DOM状态（例如表单输入值）的情况。

        如下所示，未加key情况：

<script>
  export default{
    data(){
      return {
        nums: [1,2,3]
      }
    },
    methods:{
      insert(){
        //在数组首位插入数据0
        this.nums.unshift(0)
      }
    }
  }
</script>

<template>
  <div>
    <ul>
      <li v-for="item in nums">
        <input type="checkbox" />{{item}}
      </li>
    </ul>
    <button @click="insert">插入数据</button>
  </div>
</template>

        运行效果图如下所示，勾选数据2

        点击按钮插入数据后，效果图如下：

        可以看到，原本勾选的是2，新插入数据后，变成数字1被勾选了。

        修改代码，将key加上：

<li v-for="item in nums" :key="item">
    <input type="checkbox" />{{item}}
</li>

        再次运行，将数字2勾选，然后点击按钮插入数据，可以看到数字2保持被勾选：

         因此，推荐为v-for指令提供一个key。key绑定的值期望是一个基础类型的值，例如字符串或者number类型，不能使用对象作为key。

7.数组变化侦测

        Vue 能够侦听响应式数组的变更方法，并在它们被调用时触发相关的更新。变更方法如下：