SOURCE

Vue.component('todo-item' , {
  template:'\
	<li>\
		{{title}}\
		<button v-on:click="$emit(\'remove\')">x</button>\
</li>\
',
   props:['title'] 
  
})
new Vue({
  el: '#todo-list-example',
  data: {
    newTodoText: '',
    todos: [
      'Do the dishes',
      'Take out the trash',
      'Mow the lawn'
    ]
  },
  methods: {
    addNewTodo: function () {
      this.todos.push(this.newTodoText)
      this.newTodoText = ''
    }
  }
})

<script src="https://unpkg.com/vue/dist/vue.js"></script>
<div id="todo-list-example">
  <input
    placeholder="增加列表"
    v-model="newTodoText"
    v-on:keyup.enter="addNewTodo"
  >
  <ul>
    <li
        is="todo-item"
        v-for="(todo,index) in todos"
        v-bind:title="todo"
        v-on:remove="todos.splice(index,1)" >
    </li>
  </ul>

</div>