【IMWeb训练营作业】第一次Vue作业-todo list

最新推荐文章于 2024-06-02 14:14:08 发布

堆堆锥

最新推荐文章于 2024-06-02 14:14:08 发布

阅读量498

点赞数 1

文章标签： vue todo list

本文链接：https://blog.csdn.net/sinat_22757763/article/details/70256053

版权

第一次学习vue，跟原来的jQuery思路很不一样，要时刻记着：“数据驱动、数据驱动、数据驱动”，随着视频磕磕绊绊写完了第一次作业，还要多加练习，不然又把学的东西还给老师了。。。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>任务计划列表</title>
    <link rel="stylesheet" href="index.css">
    <script src="./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.enter="add" />
        <ul class="task-count" v-show="lists.length">
            <li>{{ noCheckedLength }}个任务未完成</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="!lists.length">还没有添加任何任务</span>
            <ul class="todo-list">
                <li class="todo" v-bind:class="{completed: item.isChecked, editing: item === editTodos}" v-for="item in lists">
                    <div class="view">
                        <input type="checkbox" class="toggle" v-model="item.isChecked">
                        <label v-on:dblclick="edit(item)">{{ item.title }}</label>
                        <button class="destroy" v-on:click="del(item)"></button>
                    </div>
                    <input type="text" class="edit" v-model="item.title" v-focus="editTodos === item" v-on:keyup.enter="editCompleted(item)" v-on:keyup.esc="editCancel(item)" v-on:blur="editCompleted(item)" />
                </li>
            </ul>
        </div>
    </div>
    <script src="./app.js"></script>
</body>
</html>

//定义数据
var list = [
	{
		title: '降龙十八掌',
		isChecked: false
	},{
		title: '陈氏太极拳',
		isChecked: true
	}
];

new Vue({
	el: '.main',
	data: {
		lists: list,
		todo: "",
		editTodos: "",  //记录正在编辑的数据
		beforeTitle: ""
	},
	methods: {
		//添加任务
		add: function(e){
			this.lists.push({
				title: this.todo,
				isChecked: false
			});
			this.todo = ''
		},
		//删除任务
		del: function(todo){
			var index = this.lists.indexOf(todo);
			console.log(index);
			this.lists.splice(index, 1);
		},
		//编辑任务
		edit: function(todo){
			this.beforeTitle = todo.title;
			this.editTodos = todo;
		},
		//完成任务
		editCompleted: function(todo){
			this.editTodos = '';
		},
		//取消任务
		editCancel: function(todo){
			todo.title = this.beforeTitle;
			this.beforeTitle = '';
			this.editTodos = '';
		}
	},
	directives: {
		"focus" : {
			update: function(el, binding){
				el.focus();
			}
		}
	},
	computed: {
		noCheckedLength: function(){
			return this.lists.filter(function(index) {
				return !index.isChecked;
			}).length;
		}
	}
});

堆堆锥

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
【IMWeb训练营作业】第一次Vue作业-todo list

第一次学习vue，跟原来的jQuery思路很不一样，要时刻记着：“数据驱动、数据驱动、数据驱动”，随着视频磕磕绊绊写完了第一次作业，还要多加练习，不然又把学的东西还给老师了。。。任务计划列表任务计划列表添加任务：
复制链接

扫一扫