8、todolist示例

最新推荐文章于 2024-09-18 23:52:53 发布

原创最新推荐文章于 2024-09-18 23:52:53 发布 · 686 阅读

0 ·

CC 4.0 BY-SA版权

Vue学习笔记专栏收录该内容

16 篇文章

订阅专栏

这篇博客介绍了一个todolist应用的参考，通过访问http://www.todolist.cn/，用户可以了解该功能的详细操作和用途。

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

参考网站功能：http://www.todolist.cn/

<template>
  <div id="app">
    ToDoList
    <input type="text" v-model="toDo" v-on:keyup.enter="addToDo"/>
    <button @click="addToDo">增加</button>
    <br/>
    <hr/>
    <h2>正在进行</h2>
    <ul>
      <li v-for="(item,key) in toDoList" v-if="!item.checked">
        <input type="checkbox" v-model="item.checked"/>
        {{item.name}}
        <button @click="delToDo(key)">删除</button>
      </li>
    </ul>
    <br/>
    <h2>已经完成</h2>
    <ul>
      <li v-for="(item,key) in toDoList" v-if="item.checked">
        <input type="checkbox" v-model="item.checked"/>
        {{item.name}}
        <button @click="delToDo(key)">删除</button>
      </li>
    </ul>
  </div>
</template>

<script>
  export default {
    name: 'App',
    data() {
      return {
        toDo: '',
        toDoList: [],
      }
    },
    methods: {//自定义方法
      addToDo() {
        if (this.toDo == "") {
          alert('ToDoList不能为空');
        } else {
          this.toDoList.push({
            name: this.toDo,
            checked: false
          });
          this.toDo = "";
        }
      },
      delToDo(key) {
        this.toDoList.splice(key, 1);
      }
    }
  }
</script>