v-for 与数组

v-for 遍历数组来渲染一个列表。

格式：(item, index) in items

item(值)必选

index(索引)是可选

示例：

const items = ref([{ message: 'Foo' }, { message: 'Bar' }])

<li v-for="item in items">
  {{ item.message }}
</li>

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

除了上面遍历以外，还可以使用item of items

示例```javaScript

```

v-for 与对象

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

格式：(value, key, index) in myObject

value(值)必选

key(键)和index(索引)是可选

示例：

const myObject = reactive({
  title: 'How to do lists in Vue',
  author: 'Jane Doe',
  publishedAt: '2016-04-10'
})

<ul>
  <li v-for="value in myObject">
    {{ value }}
  </li>
</ul>

在 v-for 里使用范围值

v-for 遍历一个整数值。

示例：

<span v-for="n in 10">{{ n }}</span>

注意 n 的初值是从 1 开始而非 0。

template 上的 v-for

在 template 标签上使用 v-for 来渲染一个包含多个元素的块。

示例：

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

v-for 与 v-if

在同一节点上时，v-if 比 v-for 的优先级更高。所以 v-if 的条件将无法访问到 v-for 作用域内定义的变量别名。

使用方式是在外先包装一层 template 再在其上使用 v-for 可以解决这个问题。

示例：

<template v-for="todo in todos">
  <li v-if="!todo.isComplete">
    {{ todo.name }}
  </li>
</template>

通过 key 管理状态

作用：更高效的DOM渲染。

1、普通dom元素上使用。

示例：

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

2、在 template 标签上使用。

示例：

<template v-for="todo in todos" :key="todo.name">
  <li>{{ todo.name }}</li>
</template>

注意：key 绑定的值是一个基础类型的值，如 number ，不可以是一个对象。

组件上使用 v-for

组件上使用 v-for，和在一般的元素上使用相同。

示例：

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

注意：它不会自动将任何数据传递给组件，因为组件有自己独立的作用域。为了将迭代后的数据传递到组件中，我们还需要传递 props：

示例：

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

数组变化侦测

1、变更方法（对调用它们的原数组进行变更）

push()

pop()

shift()

unshift()

splice()

sort()

reverse()

2、替换一个数组（不会更改原数组，而总是返回一个新数组。）

filter()

concat()

slice()

当遇到的是非变更方法时，我们需要将旧的数组替换为新的。

示例：

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

展示过滤或排序后的结果

使用创建返回已过滤或已排序数组的计算属性。

示例：

const numbers = ref([1, 2, 3, 4, 5])

const evenNumbers = computed(() => {
  return numbers.value.filter((n) => n % 2 === 0)
})

<li v-for="n in evenNumbers">{{ n }}</li>

当计算属性不可行的情况下 (例如在多层嵌套的 v-for 循环中)，你可以使用以下方法。

示例：

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

function even(numbers) {
  return numbers.filter((number) => number % 2 === 0)
}

<ul v-for="numbers in sets">
  <li v-for="n in even(numbers)">{{ n }}</li>
</ul>