vue简单的添加与删除

<div id="todo-list-example">
  <input v-model="newTodoText" v-on:keyup.enter="addNewTodo" placeholder="Add a todo" ref="input1"/>
  <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>
  <button @click="add">添加</button>

</div>

Vue.component('todo-item', {
template: '<li>{{ title }}<button v-on:click="$emit(\'remove\')">X</button></li>',
  props: ['title']
});


var exampleVm=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 = ''
    },
    add:function(){
    var str=this.$refs.input1.value
    if(str==''){
    alert('请输入')
    return false
    }else{
    exampleVm.todos.push({title:str});
    }
    }
  }
})