代办事项，比较完整的例子

index.html

  
    
    
    
    
  
  
    
    

      
      
{{title}}
      
      
{{subTitle}}
      

        
        
        
        添加
        清空已完成
      
      
      

        
        
        
{{index+1}}: {{todo.text}}
      
      
{{remain}}/{{todos.length}}
    
  

main.js

import Vue from 'vue'
Vue.config.productionTip = false

new Vue({
  /* 找到id为app的容器 */
  el: '#app',
  data: {
    title: 'Vue Todo List',
    subTitle: 'VUE Base 01',
    showSub: false,
    mytodo: '',
    todos: [
      {text: '吃饭', done: false},
      {text: '睡觉', done: true},
      {text: '打豆豆', done: false}
    ]
  },
  // 新定义一个字段 remain
  computed: {
    remain () {
      return this.todos.filter(v => !v.done).length
    }
  },
  methods: {
    // 点击添加事件响应(添加元素，清空输入框)
    handleClick () {
      this.todos.push({text: this.mytodo, done: false})
      this.mytodo = ''
    },
    toggle (i) {
      // 切换状态
      this.todos[i].done = !this.todos[i].done
    },
    reset () {
      // 已完成的过滤掉
      this.todos = this.todos.filter(v => !v.done)
    }
  }
})