Vue学习：10-列表渲染-优快云博客

使用v-for指令基于一个数组来渲染一个列表

一、v-for渲染数组

语法：

1、in前一个参数：item in items

item：值

items：需要循环的数组

2、in前两个参数：(value, index) in items

value：值

index：索引

items：需要循环的数组

App.vue

<script setup>

import { ref } from 'vue';
let subject = ref([
  {id: 1,name: 'Vue'},
  {id: 2,name: 'Java'},
  {id: 3,name: 'UI设计'},
  {id: 4,name: 'Hadhoop'},
  {id: 5,name: '视频剪辑'}
])
</script>

<!-- 视图区域（view） -->
<template>
  <h3>v-for渲染数组</h3>
  <ul>
    <li v-for="sub in subject">
      编号：{{ sub.id }}----名称：{{ sub.name }}
    </li>
  </ul>
  <hr>
  <h3>v-for渲染数组，使用解构对象</h3>
  <ul>
    <li v-for="{id,name} in subject">
      编号：{{ id }}----名称：{{ name }}
    </li>
  </ul>
  <hr>
  <h3>v-for渲染数组，使用索引</h3>
  <ul>
    <li v-for="(sub,index) in subject">
      编号：{{ sub.id }}----名称：{{ sub.name }}----索引：{{ index }}
    </li>
  </ul>
  <hr>
  <h3>v-for渲染数组，使用解构对象和索引</h3>
  <ul>
    <li v-for="({id,name},index) in subject">
      编号：{{ id }}----名称：{{ name }}----索引：{{ index }}
    </li>
  </ul>
</template>

<style>
  
</style>

二、v-for渲染对象

使用v-for来遍历一个对象的所有属性，遍历的顺序会基于对该对象调用Object.keys()的返回值来决定

语法：

1、in前一个参数：value in object

value：属性值

object：需要循环的对象

2、in前两个参数：(value, name) in object

value：属性值

name：键

object：需要循环的对象

3、in前三个参数：(value, name, index) in object

value：属性值

name：键

index：索引

object：需要循环的对象

App.vue

<script setup>

import { ref } from 'vue';
let student = ref({
  stuNum: '007',
  name: 'Bond',
  age: 20
})
</script>

<!-- 视图区域（view） -->
<template>
  <h3>v-for渲染对象</h3>
  <ul>
    <li v-for="val in student">
      {{ val }}
    </li>
  </ul>
  <hr>
  <h3>v-for渲染对象，(属性值,属性名)</h3>
  <ul>
    <li v-for="(val,name) in student">
      {{ name }}----{{ val }}
    </li>
  </ul>
  <hr>
  <h3>v-for渲染对象，(属性值，属性名，索引)</h3>
  <ul>
    <li v-for="(val,name,index) in student">
      {{ name }}----{{ val }}----{{ index }}
    </li>
  </ul>
</template>

<style>
  
</style>

三、列表渲染通过 key 管理状态

当列表的数据变化时，默认情况下，vue会尽可能的复用已存在的DOM元素，从而提升渲染的性能；但这种默认的性能优化策略，会导致有状态的列表无法被正确更新。

为了给vue一个提示，以便它能跟踪每个节点的身份，从而在保证有状态的列表被正确更新的前提下，提升渲染的性能；此时，需要为每项提供一个唯一的key属性。

key的注意事项：

● key的类型只能是Number/String

● key值必须具有唯一性

● 建议循环的列表有一个属性当key（该属性的值在此列表中唯一）

● 不使用索引当key

● 建议使用v-for指令时一定要指定key的值

App.vue

<script setup>

import { ref } from 'vue';
let subject = ref([
  {id: 1,name: 'Vue'},
  {id: 2,name: 'Java'},
  {id: 3,name: 'Python'}
])

function addSubject() {
  subject.value.unshift({id: 4,name: 'C++'})
}
</script>

<!-- 视图区域（view） -->
<template>
  <button @click.once="addSubject">在数组最前面添加课程</button>
  <h3>不使用key值</h3>
  <ul>
    <li v-for="sub in subject">
      {{ sub }}-------<input type="text">
    </li>
  </ul>

  <hr>
  <h3>使用索引当key值</h3>
  <ul>
    <li v-for="(sub,index) in subject" :key="index">
      {{ sub }}-------<input type="text">
    </li>
  </ul>

  <hr>
  <h3>使用列表属性当key值（该属性必须在此列表中唯一）</h3>
  <ul>
    <li v-for="sub in subject" :key="sub.id">
      {{ sub }}-------<input type="text">
    </li>
  </ul>
</template>

<style>
  
</style>