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

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

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

模板

 

<div id="todo-list-example">

  <form v-on:submit.prevent="addNewTodo">

    <label for="new-todo">Add a todo</label>

    <input

      v-model="newTodoText"

      id="new-todo"

      placeholder="E.g. Feed the cat"

    >

    <button>Add</button>

  </form>

  <ul>

    <li

      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)"

    ></li>

  </ul>

</div>

 

组件

 

Vue.component('todo-item', {

  template: '\

    <li>\

      {{ title }}\

      <button v-on:click="$emit(\'remove\')">Remove</button>\

    </li>\

  ',

  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 = ''

    }

  }

})