todos.value.filter((t) => t !== todo)
(t) => t !== todo实际上就是
function(t){
return t !==todo
}
- t是一个形参,不用考虑他的具体意义,它可以是a,也可以是b…
- 这里的写法含义是,用新的数组 对比原来的数组,新的数组是filter过滤后的
- todo是数组中的一个数据,把新数组中不等于todo的数据也就是其他的数据返回给这个数组,就能实现删除这个本身了。
// 举例说明
todos:{
a:"数据1"
b:"数据2"
c:"数据3"
}
filter:{
a:"数据1"
b:"数据2"
c:"数据3"
}
this.todos.filter((t) => t !== todo)
- 假设todos数组里的a是当前的数据todo,
- 在filter数组中把不等于a的数据 返给todos也就是返回b和c
JavaScript 数组filter方法完整介绍:http://t.csdn.cn/9Ho6q
做vue官方教程看见的,作为初学者一脸懵:https://cn.vuejs.org/tutorial/#step-7
<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">
<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>