基于Vue2实现基础版todoList

最新推荐文章于 2024-06-25 10:16:38 发布

原创最新推荐文章于 2024-06-25 10:16:38 发布 · 240 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #前端 #vue.js

本文介绍如何使用 Vue2 构建一个简单的 todoList 应用。通过输入任务名称并添加到列表中，用户可以标记任务为已完成或删除任务。应用还提供了统计已完成任务数与总任务数的功能。

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

标题

基于Vue2实现基础版todoList

加粗样式App.vue在这里插入代码片

<template>
  <div id="app">
    <h1>todoList</h1>
    <input type="text" v-model="title"/>
    <button @click="handleClick">添加</button>
    <ul>
      <li :key="index" v-for="(item,index) in todo">
        <input type="checkbox" v-model="item.done" @click="handleCheck(index)"/>
        {{ item.title }}
        <button @click="del(index)">删除</button>
      </li>
    </ul>
    <div>
      {{active}}完成/{{ all }}总数
    </div>
  </div>
</template>
<script>

export default {
  name: 'App',
  data(){
    return{
      title:'',
      todo:[
        {title:'吃饭',done:false},
        {title:'睡觉',done:true},
        {title:'vue2',done:false}
      ]
    }
  },
  computed:{
      active(){
        return this.todo.filter(v=>v.done==true).length
      },
    all(){
        return this.todo.length
    }
  },
  methods:{
    handleClick(){
      this.todo.push(
              {
                title: this.title,
                done:false
              }
      )
      console.log (this.title)
      this.title=''
    },
    del(index){
      this.todo.splice(index, 1)
    },
    handleCheck(index){
      console.log (index)
      this.todo[index].done=!this.todo[index].done
    }
  }
}
</script>