todo-list

最新推荐文章于 2024-01-02 22:20:33 发布

原创最新推荐文章于 2024-01-02 22:20:33 发布 · 431 阅读

CC 4.0 BY-SA版权

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);
}
    }
});