添加数据渲染到页面点击对应的删除

大闸蟹~

于 2022-09-21 11:54:44 发布

阅读量270

点赞数

分类专栏： Vue 学习文章标签： vue.js 前端

本文链接：https://blog.csdn.net/YCHH1/article/details/126969974

版权

Vue 学习专栏收录该内容

13 篇文章

订阅专栏

本文介绍了一个使用Vue.js实现的简单待办事项应用程序。该程序包含添加和删除待办事项的功能，并预设了三个初始任务：学习HTML、JavaScript和Vue。通过此示例可以了解Vue的数据绑定和事件处理机制。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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

export default {
  data() {
    return {
      newTodo: '',
      todos: [
        { id: id++, text: 'Learn HTML' },
        { id: id++, text: 'Learn JavaScript' },
        { id: id++, text: 'Learn Vue' }
      ]
    }
  },
  methods: {
    addTodo() {
      this.todos.push({id:id++,text:this.newTodo})
      this.newTodo=""
    },
    removeTodo(todo) {
      this.todos= this.todos.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>