IMWeb训练营作业--VUE练习，ToDoList

来源：互联网发布：外国人评价三体知乎编辑：程序博客网时间：2024/05/22 14:06

用vue制作一个超市采购清单的相关List

以下是页面代码（html）

    <div class="page-top">        <h2>采购清单</h2>    </div>    <div class="main">        <h3 class="big-title">添加采购清单</h3>        <input placeholder="eg:毛巾；tip:+回车添加采购物品" class="task-input" type="text" v-model="todo" v-on:keyup.enter="addTodo">        <h3 class="big-title">采购列表<span>(双击可编辑，esc取消编辑)：</span></h3>        <ul class="task-count" v-show="list.length">            <li>{{ noCheckeLength }}个未采购清单</li>        </ul>        <div class="tasks">            <span class="no-task-tip" v-show="!list.length">还没有采购任何物品</span>            <ul class="todo-list">                <li class="todo" :class="{completed: item.isChecked,editing: item === edtorTodos}" v-for="item in list">                    <div class="view">                        <input class="toggle" type="checkbox" v-model="item.isChecked">                        <label @dblclick="edtorTodo(item)">{{ item.title }}</label>                        <button class="destroy" @click="deleteTodo()">X</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>

以下是js代码，默认存在两个已添加清单

        var list = [            {                title:"酸奶",                isChecked:false//状态false为未选中,未完成            },            {                title:"面包",                isChecked:true//状态true为选中,已完成            }        ];        new Vue({            el:".main",            data:{                list:list,                todo:"",                edtorTodos:"",//记录正在编辑的数据                beforeTitle:""//记录正在编辑的数据原title            },            computed:{                noCheckeLength:function(){                    return this.list.filter(function(item){                        return !item.isChecked                    }).length                }            },            methods:{                addTodo(){//添加采购清单                    this.list.push({                        title:this.todo,                        isChecked:false                    });                    this.todo = "";                },                deleteTodo(todo){//删除清单                    var index = this.list.indexOf(todo);                    this.list.splice(index,1);                },                edtorTodo(todo){//编辑清单                    // 编辑清单的时候，纪录一下编辑这条任务的title，方便再取消编辑的时候，从新赋值给title原来的值                    this.beforeTitle = todo.title;                    this.edtorTodos = todo;                },                edtorTodoed(todo){//编辑清单成功                    this.edtorTodos = "";                },                cancelTodo(todo){//取消编辑清单                   todo.title = this.beforeTitle;                   this.beforeTitle = "";                   // 让div显示出来，input隐藏                   this.edtorTodos = "";                }            },            directives:{                "foucs":{                    update(el,binding){                        if(binding.value){                            el.focus();                        }                    }                }            }        })

以下是本demo的效果图

图一：

图二：

0 0