vue初探 —— todoList

最近在学习vue.js；并且写了个todoList。

功能实现：增、删、改任务；过滤未完成 / 已完成任务；本地存储todoList.

效果图：

主要代码：

<template>
    <div id="todoList">
        <div class="input">
            <input type="text" v-model="inputTxt"  @keydown.enter="addTodo" />
            <p class="submitBtn" @click="addTodo">提交</p>
        </div>
        <div>
            <ul class="listTit">
                <li @click="filterData(0)">全部</li>
                <li style="color: rgb(204, 38, 16);" @click="filterData(1)">未完成</li>
                <li style="color: rgb(15, 131, 15);" @click="filterData(2)">已完成</li>
            </ul>
            <ul class="list">
                <li v-for="(item,index) in filterList" >
                    <!-- {{item.msg}} -->
                    <span :class="{textLine: item.isChecked}" @click="finishTodo(item)">{{item.msg}}</span> 
                    <span class="editBtn" @click="edit(item,index)">修改</span> 
                    <span class="delBtn" @click="del(index)">删除</span> 
                </li>
            </ul>
        </div>
    </div>
</template>

<script>
import Store from '@/store/todolist';
export default {
    name: 'TodoList',
    data(){
        return{
            inputTxt : '',
            allList : Store.get(),
            filterList : Store.get(),
        }
    },
    watch:{
        allList: {
            handler: function (items) {
                Store.save(items);
             },
            deep: true
        },
    },
    
    methods: {
        addTodo() {
            if(this.inputTxt !== ''){
                this.allList.push({msg : this.inputTxt,isChecked : false});     //新增一个todo对象，默认未完成
                this.inputTxt = '';         //置空输入框
            };
        },
        finishTodo(item) {
            item.isChecked = !item.isChecked;       //点击todo，取反isChecked（完成与未完成的切换）
        },
        del(index){                 //删除指定的todo
            this.allList.splice(index, 1);
        },
        edit(item,index){       //修改todo
            this.inputTxt = item.msg;           //将要修改的todo放到input里面，便于修改
            this.allList.splice(index, 1);          //并删除要修改的todo
        },
        filterData(flag){               //过滤全部、未完成、已完成任务
            if(flag === 0){
                this.filterList = this.allList;
            }else if(flag === 1){
                const arr_doing = [];
                this.allList.map((item,index) => {
                    if(!item.isChecked){
                        arr_doing.push(item);
                    }
                });
                this.filterList = arr_doing;
            }else{
                this.allList.map((item,index) => {
                    const arr_done = [];
                    this.allList.map((item,index) => {
                        if(item.isChecked){
                            arr_done.push(item);
                        }
                    });
                    this.filterList = arr_done;
                });
            }
        }
    },
}
</script>

<style lang="scss" scoped>
#todoList{
        width: 500px;
        margin: 0 auto;
    .input{
        display: flex;
        input{
            width: 300px;
        }
        .submitBtn{
            width: 60px;
            height: 30px;
            line-height: 30px;
            text-align: center;
            border: solid 1px #ccc;
            border-radius: 4px;
            margin-left: 10px;
            cursor: pointer;
        }
    }
    .list{
        // float: left;
        display: flex;
        flex-direction: column;

        li{
            width: 250px;
            margin: 5px 0 0 5px;
            cursor: pointer;
            .radio{
                margin-right: 6px;
            }
            .editBtn{
                color:rgb(15, 131, 15);
                margin-left:6px;
                cursor: pointer;
            }
            .delBtn{
                color:rgb(204, 38, 16);
                margin-left:6px;
                cursor: pointer;
            }
        }
    }
    .listTit{
        display: flex;
        li{
            margin: 10px 20px 0 10px;
            cursor: pointer;
        }
    }
    
}
.textLine{
    text-decoration: line-through;
    color: rgb(15, 131, 15);
}
</style>

本地存储功能：

const todoList = 'todoList';
export default {
    get: () => {
        return localStorage.getItem(todoList) ? JSON.parse(localStorage.getItem(todoList)) : [];
    },
    save: (items) => {
        localStorage.setItem(todoList, JSON.stringify(items));
    }
}

文章仅为本人学习过程的一个记录，仅供参考，如有问题，欢迎指出！