Vue.js任务管理应用-优快云博客

本文链接：https://blog.youkuaiyun.com/fdark/article/details/70248616

本文介绍了一个使用Vue.js实现的任务管理应用，展示了如何通过Vue的数据绑定、计算属性、指令等功能来构建一个具备增删改查功能的应用。文章还介绍了如何监听数据变化并持久化存储，以及如何筛选和过滤任务列表。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

export default{
    name: "app",
  data:function() {
    return{
			todos: store.fetch(),//从当地获得数据
			newTodo: '',//中间数据源 于数据框绑定
			editedTodo: null, //数据编辑状态
			visibility: 'all',//是否已经完成
      
		}},


		watch: { // //监听数据变化并将数据保存
			todos: {
				deep: true,
				handler: store.save
			}
		},

	
		computed: {

//计算数据的状态
			filteredTodos: function () {
				return filters[this.visibility](this.todos);
			},
			remaining: function () {
				return filters.active(this.todos).length;
			},
			allDone: {
				get: function () {
					return this.remaining === 0;
				},
				set: function (value) {
					this.todos.forEach(function (todo) {
						todo.completed = value;
					});
				}
			}
		},

		methods: {

			pluralize: function (word, count) {
				return word + (count === 1 ? '' : 's');
			},

			addTodo: function () {

 //添加数据
				var value = this.newTodo && this.newTodo.trim();
				if (!value) {
					return;
				}
				this.todos.push({ title: value, completed: false });
				this.newTodo = '';
			},

			removeTodo: function (todo) {

//删除数据
				var index = this.todos.indexOf(todo);
				this.todos.splice(index, 1);
			},

			editTodo: function (todo) {

//编辑数据
				this.beforeEditCache = todo.title;
				this.editedTodo = todo;
			},

			doneEdit: function (todo) {

//数据编辑完成
				if (!this.editedTodo) {
					return;
				}
				this.editedTodo = null;
				todo.title = todo.title.trim();
				if (!todo.title) {
					this.removeTodo(todo);
				}
			},

			cancelEdit: function (todo) {

//取消编辑
				this.editedTodo = null;
				todo.title = this.beforeEditCache;
			},

			removeCompleted: function () {
				this.todos = filters.active(this.todos);
			}
		},

		directives: {

//获得焦距
			'todo-focus': function (el, binding) {
				if (binding.value) {
					el.focus();
				}
			}
		}
	}

[IMWeb训练营作业]TodoList