todo list完整例子--教你看懂Vue

 参考官网   https://cn.vuejs.org/v2/guide/list.html

下面是一个简单的 todo 列表的完整例子

模板

 

"todo-list-example">

 

"addNewTodo">

    "new-todo">Add a todo

   

      v-model="newTodoText"

      id="new-todo"

      placeholder="E.g. Feed the cat"

    >

    Add

 

 

   

      is="todo-item"

      v-for="(todo, index) in todos"

      v-bind:key="todo.id"

      v-bind:title="todo.title"

      v-on:remove="todos.splice(index, 1)"

    >

 

 

组件

 

Vue.component('todo-item', {

  template: '\

   

\

      { { title }}\

      Remove\

   

\

  ',

  props: ['title']

})

 

 

 

实例

 

new Vue({

  el: '#todo-list-example',

  data: {

    newTodoText: '',

    todos: [

      {

        id: 1,

        title: 'Do the dishes',

      },

      {

        id: 2,

        title: 'Take out the trash',

      },

      {

        id: 3,

        title: 'Mow the lawn'

      }

    ],

    nextTodoId: 4

  },

  methods: {

    addNewTodo: function () {

      this.todos.push({

        id: this.nextTodoId++,

        title: this.newTodoText

      })

      this.newTodoText = ''

    }

  }

})