我們可以使用 v-for 指令來渲染一個基於源數組的列表:
<ul>
<li v-for="todo in todos" :key="todo.id">
{{ todo.text }}
</li>
</ul>
這裡的 todo 是一個局部變量,表示當前正在迭代的數組元素。它只能在 v-for 所綁定的元素上或是其內部訪問,就像函數的作用域一樣。
注意,我們還給每個 todo 對象設置了唯一的 id,並且將它作為特殊的 key 屬性綁定到每個 li。key 使得 Vue 能夠精確的移動每個 li,以匹配對應的對象在數組中的位置。
更新列表有兩種方式:
1. 在源數組上調用變更方法:
todos.value.push(newTodo)
2. 使用新的數組替代原數組:
todos.value = todos.value.filter(/* ... */)
這裡有一個簡單的 todo 列表——試著實現一下 addTodo() 和 removeTodo() 這兩個方法的邏輯,使列表能夠正常工作!
<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() {
// ...
newTodo.value = ''
}
function removeTodo(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>
<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.pop({id: todo.id,text: todo.text})
}
</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>
function removeTodo(todo) {
todos.value = todos.value.filter((t) => t !== todo)
}