Vue 列表渲染 - 技术栈

一、前言

v-for 是 Vue 的列表渲染指令

根据源数组（或对象）的长度，自动循环生成一组 DOM 元素，每一项都能拿到当前数据与索引，并支持响应式更新。

举个例子：数组循环

javascript 复制代码

<template>
  <ul>
    <li v-for="item in items" :key="item.id">
      {{ item.name }}
    </li>
  </ul>
</template>

<script setup>
import { ref } from 'vue'
const items = ref([
  { id: 1, name: 'Apple' },
  { id: 2, name: 'Banana' }
])
</script>

总结：v-for="(item, index) in 源数组" :key="item.id" 让 Vue 根据数据长度自动循环生成 DOM，并自动跟踪增删改，是渲染列表的标配指令。

维护列表响应式：

操作	正确方式	错误方式
追加	`items.push(newItem)`	`items = newArr`（整体替换会丢失响应式）
更新	`items[index].xxx = newVal`	`items[index] = newObj`（需用 `splice` 或 `Vue.set`）

二、代码示例

javascript 复制代码

<script setup>
import { ref } from 'vue'

// 给每个 todo 对象一个唯一的 id
let id = 0

const newTodo = ref('')
const todos = ref([
  { id: id++, text: 'Learn HTML' },
  { id: id++, text: 'Learn JavaScript' },
  { id: id++, text: 'Learn Vue' }
])

function addTodo() {
  todos.value.push({ id: id++, text: newTodo.value })
  newTodo.value = ''
}

function removeTodo(todo) {
  todos.value = todos.value.filter((t) => t !== todo)
}
</script>

<template>
  <form @submit.prevent="addTodo">
    <input v-model="newTodo" required placeholder="new todo">
    <button>Add Todo</button>
  </form>
  <ul>
    <li v-for="todo in todos" :key="todo.id">
      {{ todo.text }}
      <button @click="removeTodo(todo)">X</button>
    </li>
  </ul>
</template>

逐行解读：

代码	作用
`let id = 0`	自增 ID，保证 `v-for` 的 `:key` 唯一
`newTodo`	输入框双向绑定
`todos`	任务列表，响应式数组
`@submit.prevent="addTodo"`	拦截表单默认刷新，回车或点击按钮都触发添加
`v-model="newTodo"`	输入框 ↔ 变量双向同步
`v-for="todo in todos" :key="todo.id"`	列表循环，Vue 根据 key 追踪增删
`@click="removeTodo(todo)"`	传递当前项，过滤删除

代码解释:

javascript 复制代码

**todos.vlaue = todos.value.filter((t) => t !== todo)**

todos 是一个 ref([])，必须通过 .value 访问或修改

filter 会返回一个新数组，替换掉原数组，Vue 会响应式更新视图

t !== todo 表示：只保留不是当前这一项的其他项，从而实现删除

javascript 复制代码

todos.value.push({id:id++, text:newTodo.value})

片段	含义
`todos.value`	访问 `ref([])` 里的数组
`.push(...)`	在数组末尾追加元素
`{ id: id++, text: newTodo.value }`	新元素对象， `id` 先取值再加 1，保证唯一； `text` 取输入框当前内容