vue---todolist

最新推荐文章于 2023-09-04 17:14:36 发布

原创最新推荐文章于 2023-09-04 17:14:36 发布 · 283 阅读

0 ·

CC 4.0 BY-SA版权

vue 专栏收录该内容

1 篇文章

订阅专栏

本文介绍了一个使用Vue.js框架实现的Todo应用案例。通过该示例，详细展示了如何使用Vue的数据绑定、计算属性、监听及指令等功能来构建一个具备添加、删除、编辑功能的任务列表应用，并实现了不同视图筛选功能。

Vue 学习作业一 todolist

模板用的是todomvc的模板
这里写图片描述

todo.js

const filters = {
  all (todoList) {
    return todoList
  },
  active (todoList) {
    return todoList.filter((todo) => {
      return !todo.completed
    })
  },
  completed (todoList) {
    return todoList.filter((todo) => {
      return todo.completed
    })
  }
}
var app = new Vue({
  el: '.todoapp',
  data: {
    // view
    newTodo: '',
    // model
    todoList: [],
    visibility: 'all', // 'all', 'active', 'completed'
    editingTodo: null
  },
  methods: {
    add () {
      let value = this.newTodo
      if (!value) {
        return
      }
      this.todoList.push({
        todo: value,
        completed: false
      })
    },
    deleteTodo (todo) {
      this.todoList.splice(this.todoList.indexOf(todo), 1)
    },
    editTodo (todo) {
      this.beforeEdit = todo.todo
      this.editingTodo = todo
    },
    finishEdit (todo) {
      if (!this.editingTodo) {
        return
      }
      this.editingTodo = null
      todo.todo = todo.todo.trim()
      if (!todo.todo) {
        this.deleteTodo(todo)
      }
    },
    cancelEdit (todo) {
      this.editingTodo = null
      todo.todo = this.beforeEdit
    },
    clearCompleted () {
      this.todoList = filters.actvie(this.todos)
    }
  },
  computed: {
    todolen () {
      return this.todoList.length
    },
    filteredTodos () {
      return filters[this.visibility](this.todoList)
    },
    remaining () {
      return filters.active(this.todoList).length
    },
    allCompleted: {
      get: function () {
        return this.remaining === 0
      },
      set: function (value) {
        this.todoList.forEach(function (todo) {
          todo.completed = value
        })
      }
    }
  },
  watch: {
    todolen (newValue, oldValue) {
      newValue === (oldValue + 1) && (this.newTodo = '')
    }
  },
  filters: {
    pluralize: function (n) {
      return n === 1 ? 'item' : 'items'
    }
  },
  directives: {
    'focus': function (el, value) {
      if (value) {
        console.log(value)
        el.focus()
      }
    }
  }
})