todo-list

来源：互联网发布：linux下装flashplayer 编辑：程序博客网时间：2024/05/16 09:10

html代码：

<!DOCTYPE HTML><html><meta charset="utf-8"><head>    <script src="js/vue.js"></script>    <title></title>    <link rel="stylesheet" href="styles/main.css"/>    <style type="text/css">        .header{            width: 100%;            height: 60px;            background-color: orangered;        }        .center{            background-color: #eeeeee;        }        .task{            width: 100%;            height: 30px;            background-color: #FFFFFF;            border: 1px solid #aaaaaa;            border-radius: 3px;        }        .list{            height: 30px;            margin-bottom: 10px;        }        .btn{            width: 120px;            height: 28px;            background-color: #FFFFFF;            border: 1px solid #aaaaaa;        }        #btn{            background-color: #aaaaaa;            float: right;        }        .destroy{            width: 20px;            height: 20px;            border-radius: 5px;            background-color: #FFFFFF;            border: none;        }        .action{            float: right;        }        .complicated{            text-decoration: line-through;            width: 100%;            background-color: #FFFFFF;        }    </style></head><body><div class="header">    <div class="comWidth">        <p style="line-height: 60px;font-size: larger;color: #FFFFFF">任务计划列表</p>    </div></div><div class="center">    <div class="comWidth">        <lable for="task" >添加任务</lable>        <input v-model="todo" v-on:keyup.enter="addTodo(123,$event)" type="textarea"  class="task" placeholder="例如：吃饭睡觉打豆豆； 提示： +回车可添加任务"/>        <ul class="list">            <li v-show="list.length" class="fl">                一个任务未完成            </li>            <li class="action">                <a href="#" class="active"></a>                <a href="#" >未完成的任务</a>                <a href="#" >完成的任务</a>            </li>        </ul>        <h2>任务列表：</h2>        <span v-show="!list.length">还没有添加事件</span>        <ul class="todo-list">            <li v-for="item in list">                <div class="view" :class="{complicated:item.isChecked}">                    <input type="checkbox" name="view" v-model="item.isChecked"/>                    <lable for="view">{{item.title}}</lable>                    <button class="destroy" @click="deleteTo(item)"></button>                </div>                <input class="edit" type="text"/>            </li>        </ul>    </div></div><script src="js/app.js"></script></body></html>

js代码：

/** * Created by Administrator on 2017/4/18. */var list=[    {        title:"吃饭打豆豆",        isChecked:false    },    {        title:"吃饭打豆豆",        isChecked:true    }];var vu=new Vue({    el:".center",    data:{        list:list,        todo:""    },    methods:{        addTodo:function(date,ev){//添加任务            //向list添加任务            /*            * */            //事件中this指的根实例            //if(ev.keyCode===13){                this.list.push({                   //title:ev.target.value                    title:this.todo,                    isChecked:false                });            this.todo='';            //}        },        deleteTo:function(todo){            var index=this.list.indexOf(todo);            this.list.splice(index,1);}    }});

0 0