【IMWeb训练营作业】To do list

来源：互联网发布：有了源码怎么做软件编辑：程序博客网时间：2024/06/06 19:57

To do list

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>To do list</title>    <link rel="stylesheet" href="css/main.css">    <script src="js/vue.js"></script></head><body>    <div class="page-top">        <div class="page-content">            <h2>任务计划列表</h2>        </div>    </div>    <div class="main">        <h3 class="big-title">添加任务：</h3>        <input             placeholder="例如：吃饭睡觉打豆豆；    提示：+回车即可添加任务"             class="task-input"             type="text"            v-model="todo"            v-on:keyup.13="addTodo"        />        <ul class="task-count" v-show="list.length">            <li>{{noCheckeLength}}个任务未完成</li>            <li class="action">                <a class="active" href="#">所有任务</a>                <a href="#">未完成的任务</a>                <a href="#">完成的任务</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,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(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="js/app.js"></script></body></html>

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){  //编辑任务console.log(todo);//编辑任务的时候，记录一下编辑这条任务的title，方便在取消编辑的时候重新给之前的titlethis.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();}}}}});

按照课程视频老师中的代码复写，自己还得加强理解多巩固复习

0 0