Vue 小组件input keyup.enter绑定

<div id="todo-list-example">
 <input
 v-model="newTodoText"
 v-on:keyup.enter="addNewTodo"
 placeholder="Add a todo"
 >
 <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\')">X</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 = ''
 }
 }
})

 

转载于:https://www.cnblogs.com/dianzan/p/8496532.html