2.7 列表渲染

2.7.1 v-for

<script setup>
const parentMessage = ref('Parent')
const items = ref([{ message: 'Foo' }, { message: 'Bar' }])
</script>
<template>
  <li v-for="(item, index) in items">
    {{ parentMessage }} - {{ index }} - {{ item.message }}
  </li>
</template>

2.7.2 v-for与对象

<script setup>
const myObject = reactive({
  title: 'How to do lists in Vue',
  author: 'Jane Doe',
  publishedAt: '2016-04-10'
})
</script>
<template>
<li v-for="(value, key, index) in myObject">
  {{ index }}. {{ key }}: {{ value }}
</li>
</template>

2.7.3 在v-for里使用范围值

<!-- n从1开始 -->
<span v-for="n in 10">{{ n }}</span>

2.7.4 <template>上的v-for

<ul>
  <template v-for="item in items">
    <li>{{ item.msg }}</li>
    <li class="divider" role="presentation"></li>
  </template>
</ul>

2.7.5 通过 key 管理状态

<div v-for="item in items" :key="item.id">
  <!-- 内容 -->
</div>

提示

1. 推荐任何v-for提供一个key
2. key绑定string，number，不能用对象

2.7.6 组件上使用v-for

<MyComponent
  v-for="(item, index) in items"
  :item="item"
  :index="index"
  :key="item.id"
/>

2.7.7 数组变化侦测

变更方法

1. push()
2. pop()
3. shift()
4. unshift()
5. splice()
6. sort()
7. reverse()

替换数组

filter()，concat() 和 slice()，这些都不会更改原数组，而总是返回一个新数组。

// `items` 是一个数组的 ref
items.value = items.value.filter((item) => item.message.match(/Foo/))

2.7.8 展示过滤或排序后的结果

<script setup>
const sets = ref([
  [1, 2, 3, 4, 5],
  [6, 7, 8, 9, 10]
])

function even(numbers) {
  // return numbers.filter((number) => number % 2 === 0)
  return [...numbers].reverse() // sort()
}
</script>
<template>
<ul v-for="numbers in sets">
  <li v-for="n in even(numbers)">{{ n }}</li>
</ul>
</template>