使用vue完成ToDoList

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>
©️2020 CSDN 皮肤主题: 1024 设计师:上身试试 返回首页