vue.js之 todolist 简单综合实例

todolist 效果图：

这里写图片描述

具体代码：

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0">
    <title></title>
    <script src="https://unpkg.com/vue"></script>
    <style type="text/css">
		.edit {display:block;width:80%;height:35px;line-height:35px;margin:30px auto;box-sizing:border-box;padding-left:4px;border-radius:4px;border:1px solid #ccc;outline:0;box-shadow:0 0 5px #ccc;}
		.list {margin:0 auto;width:80%;}
		.unit {position:relative;padding:10px 0;border-bottom:1px solid #efefef;}
		.unit:last-child {border-bottom:0;}
		.finish {text-decoration:line-through;color:#ccc;}
		.del {background:red;text-decoration:none;position:absolute;right:0;font-size:12px;border:0;outline:0;padding:2px 5px;border-radius:5px;color:#fff;}
		.empty {font-size:13px;color:#ccc;text-align:center;padding:10px 0;}
    </style>
</head>

<body>
    <div id="app">
		<input class="edit" type="text" v-model="task.content" v-on:keydown.enter="addTask" />
        <div class="list">
            <div class="unit" v-for="(item,index) in list">
				<input type="checkbox" v-on:click="changeState(index)" v-bind:checked="item.finished">
				<span v-bind:class="{'finish':item.finished}"> {{item.content}}</span>
				<button v-on:click="removeTask(index)" class="del">删除</button>
			</div>
        </div>
        <p class="empty" v-if="list.length == 0">暂无任务</p>
    </div>
    <script type="text/javascript">
        var app = new Vue({
                el: '#app',
                data: {
                    task: {
                        content: '',
                        finished: false,
                        deleted: false
                    },
                    list: []
                },
                methods: {
                    addTask: function() {
                        this.list.push(this.task);
                        this.task = {
                            content: '',
                            finished: false,
                            deleted: false
                        }
                    },
                    changeState: function(index) {
                        var cur = this.list[index].finished;
                        this.list[index].finished = !cur
                    },
                    removeTask: function(index) {
                        this.list.splice(index, 1)
                    }
                }
            }
        );
    </script>
</body>

</html>