【前端学习笔记】todos.value.filter((t) =＞ t !== todo)

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>