<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});
}
}
}
})
