vuecli-案例TodoList--已经完成

vuecli-案例TodoList--已经完成

制作http://todolist.cn/ 官网效果，思路分析如下所示：

 视图层：

<template>
    <div>
        <!-- 输入之后，就提交 -->
        <input type="text" v-model="inputValue" @keypress.enter="submit">
        <h2>正在进行({{list.length}})</h2>
        <ul>
            <li v-for="(item,index) in list" :key="index">
                <input type="checkbox" name="" id="" @click.prevent="cut(index,true)" >
                <input v-if="updateState==index" class="update-input" type="text" name="" id=""
                 v-model="item.title" @blur="update(true)" @keypress.enter="update(true)" v-focus>
                <span v-else  class="list-item" @click="change(index,true)">
                    {{item.title}}
                </span>
                <button @click="del(index,true)">删除</button>
            </li>
        </ul>
        <hr>
        <h2>已经完成({{list1.length}})</h2>
        <ul>
            <li v-for="(item,index) in list1" :key="index">
                <input type="checkbox" name="" id="" @click.prevent="cut(index,false)" :checked="{checked:item.done}">
                <input v-if="updateState1==index" class="update-input" type="text" name="" id=""
                 v-model="item.title" @blur="update(false)" @keypress.enter="update(false)" v-focus>
                <span v-else  class="list-item"  @click="change(index,false)">{{item.title}}</span>
                <button @click="del(index,false)">删除</button>
            </li>
        </ul>
    </div>
</template>

逻辑层：

<script>
export default {
    name: 'JdApp',
    data() {
        return {
            inputValue:'',
            list:[],
            list1:[],
            updateState:-1,
            updateState1:-1,
        };
    },
    created() {
        let todoList = localStorage.todoList;
        if(todoList){
            this.list = JSON.parse(todoList)
            console.log( this.list)
        }
        let todoList1 = localStorage.todoList1;
        if(todoList1){
            this.list1 = JSON.parse(todoList1)
            console.log( this.list1)
        }
    },
    watch:{
        list:{
            handler(list){
               localStorage.todoList = JSON.stringify(list);
            },
            deep:true
        },
        list1:{
            handler(list1){
               localStorage.todoList1 = JSON.stringify(list1);
            },
            deep:true
        }
    },
    methods: {
        submit(){
            if(this.inputValue==''){
                alert('请输入内容');
                return false
            }
            this.list.push({
                title:this.inputValue,
                done:false
            })
            this.inputValue = ''
        },
        del(index,params){
        //    let rel =  window.confirm('你确认删除吗?')
        //    if(!rel) return
            if(params){
                this.list.splice(index,1)
            }else{
                this.list1.splice(index,1)
            }
            
        },
        change(index,params){
            // 把从视图层传入过来的索引index值，赋值给数据中心data的updateState去使用

            // 如果点击这一项，是数组1里的索引
            // console.log(params)
            if(params){
                this.updateState = index;
                console.log(index)
            }else{
               this.updateState1 = index;
                console.log(index)
            }

        },
        update(params){
            console.log(params)
            if(params){
                this.updateState = -1
            }else{
                this.updateState1 = -1
            }

        },
        cut(index,params){
            console.log(index)

            if(index,params){
                this.list1.push({
                    title:this.list[index].title,
                    done:true
                })
                this.list.splice(index,1);
            }else{
                this.list.push({
                    title:this.list1[index].title,
                    done:true
                })
                this.list1.splice(index,1);
            }

          
        },
    },
};
</script>

样式：

<style>
ul{
    list-style-type: none;
    margin: 0;
    padding: 0;
}
li{
    margin: 20px 0;
}
/* 设置span标签样式 */
.list-item{
    display: inline-block;
    width: 200px;
    height: 30px;
    cursor: pointer;
}
/* 设置input文本框样式 */
.update-input{
    width: 200px;
    height: 30px;
}

</style>