vue---todolist

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