使用vue完成ToDoList

最新推荐文章于 2022-03-19 14:12:48 发布

拳是套路

最新推荐文章于 2022-03-19 14:12:48 发布

阅读量303

点赞数

CC 4.0 BY-SA版权

分类专栏： vue

本文链接：https://blog.csdn.net/weixin_43750811/article/details/107728821

vue 专栏收录该内容

1 篇文章

订阅专栏

本文介绍了一个基于Vue.js的ToDoList应用实现，通过使用Vue的双向绑定特性，实现了任务的添加、删除和状态切换功能。代码示例详细展示了如何响应键盘事件添加任务，以及如何通过点击操作来完成或取消任务。

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

ToDoList功能

增加清单: enter按键事件, 把单个清单任务对象, 添加到清单数组,
完成清单: 点击checkbox复选框, 控制在哪个列表显示, 默认事件去除
删除清单: 点击删除按钮, 从清单数组删除对应的任务, splice

代码实现

使用vue的双向绑定数据非常容易实现

<body>
<div id="app">
    <div class="header">
        <section>
            <label>ToDoList</label>
            <input type="text" id="inp" v-model="task" @keyup="keyupadd" placeholder="添加">
        </section>
    </div>
    <section>
        <h2>正在进行</h2>
        <ol>
            <li v-for = "(item,index) in arr1" :key="item + index">
                <input type="checkbox" @click="onchange(index,item)">
                <p>{{ item }}</p>
                <span @click="deletequ(index)">-</span>
            </li>
            
        </ol>
        <h2>已经完成</h2>
        <ul>
            <li v-for = "(item,index) in arr2" :key="item + index">
                <input type="checkbox" checked  @click="onchange2(index,item)">
                <p>{{ item }}</p>  
                <span @click="deletedown(index)" >-</span>
            </li>
        </ul>
    </section>
    {{arr11}}
</div>
</body>
<script>

    var vm = new Vue({
        el:"#app",
        data:{
            task:"",
            arr1:[],//未完成
            arr2:[],//已完成
        },
        methods:{
            keyupadd(evet){
                if(evet.keyCode  == "13" &&  evet.target.value !=""){
                    this.arr1.push(evet.target.value);
                    this.task = "";
                }
            },
            deletequ(index){
                this.arr1.splice(index,1);
            },
            deletedown(index){
                this.arr2.splice(index,1);
            },
            onchange(index,item){
                this.arr1.splice(index,1);
                this.arr2.unshift(item);
            },
            onchange2(index,item){
                this.arr2.splice(index,1);
                this.arr1.push(item);
            },
        }
    })
</script>