[IMWeb训练营作业]vue实现简单的todo list

最新推荐文章于 2021-11-23 21:52:08 发布

lllo3o

最新推荐文章于 2021-11-23 21:52:08 发布

阅读量590

点赞数 1

文章标签： vue

本文链接：https://blog.csdn.net/lllo3o/article/details/70245421

版权

运行效果图：

HTML：

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <link rel="stylesheet" href="index.css">
</head>
<body>
<div class="page-top">
    <div class="page-content">
        <h2>任务计划列表</h2>
    </div>
</div>
<div class="main">
    <h3 class="big-title">添加任务：</h3>
    <input
            placeholder=" [IMWeb训练营作业]回车即可添加任务"
            class="task-input"
            type="text"
            v-model="todo"
            @keyup.13="addTodo"
    />
    <ul class="task-count" v-show="list.length">
        <li>{{noCheckedLength}}个任务未完成</li>
        <li class="action">
            <a href="#all" :class={active:undo==1} @click="choose(1)">所有任务</a>
            <a href="#unfinished" :class={active:undo==2} @click="choose(2)">未完成的任务</a>
            <a href="#finished" :class={active:undo==3} @click="choose(3)">完成的任务</a>
        </li>
    </ul>
    <h3 class="big-title">任务列表：</h3>
    <div class="tasks">
        <span class="no-task-tip" v-show="!list.length">还没有添加任何任务</span>
        <ul class="todo-list">
            <li class="todo"  :class="{completed:item.isChecked == true,editing:item === edtorTodos}"
                v-for="item in filteredList">
                <div class="view">
                    <input class="toggle" type="checkbox" v-model="item.isChecked"/>
                    <label @dblclick="edtorTodo(item)">{{ item.title }}</label>
                    <button class="destroy" @click="deleteTodo(item)"></button>
                </div>
                <input
                        v-foucs="edtorTodos === item"
                        class="edit"
                        type="text"
                        v-model="item.title"
                        @blur = 'edtorTodoed(item)'
                        @keyup.13 = 'edtorTodoed(item)'
                        @keyup.esc="cancelTodo(item)"
                />
            </li>
        </ul>
    </div>
</div>
<script src="./vue.js"></script>
<script src="app.js"></script>
</body>
</html>

JS：

var list = [
    {
        title:"学习",
        isChecked:false //状态为false，为不选中  任务未完成
    },
    {
        title:"剁手",
        isChecked:true  //状态为true，为选中    任务完成
    },
    {
        title:"运动",
        isChecked:false
    }
];

var filter = {                  //定义filter对象
    all:function(list){
        return list
    },
    finished:function(list){
        return list.filter(function(item){
            return item.isChecked;
        })
    },
    unfinished:function(list){
        return list.filter(function(item){
            return !item.isChecked;
        })
    }
}

var vm = new Vue({
    el:".main",
    data:{
        list:list,
        todo:'',
        edtorTodos:'',
        beforeTitle:'',
        undo:1, //默认选中1，所有任务,
        visibility:"all"
    },
    computed:{                     //计算属性
        noCheckedLength:function(){
          return  this.list.filter(function(item){
                return !item.isChecked}).length
        },
        filteredList:function(){
            return filter[this.visibility]?filter[this.visibility](list):list;  //注意此处调用
        }
    },
    methods:{
        addTodo(ev){
            if(this.todo=='') return; //为空返回
            this.list.push({
                title:this.todo,
                isChecked:false
            });
            this.todo='';
        },
        deleteTodo(item){
            var index = this.list.indexOf(item);
            this.list.splice(index,1)
        },
        edtorTodo(item){
            console.log(item);
            this.beforeTitle = item.title;
            this.edtorTodos=item;

        },
        edtorTodoed(item){
            this.edtorTodos='';

        },
        cancelTodo(todo){
            todo.title = this.beforeTitle;
            this.edtorTodos='';
        },
        choose(num){
            this.undo=num;
        }
    },
    directives:{ //directives与methods平级
    "foucs":{
        update(el,binding){
            if(binding.value){
                el.focus();
            }
        }
    }
}
});
function watchHashChange(){
    var hash = window.location.hash.slice(1);
    vm.visibility = hash;
}
watchHashChange();
window.addEventListener("hashchange",watchHashChange)