<!DOCTYPE HTML>
<html>
<head>
<title>vue.js 处理用户输入</title>
<script src="../vue.js"></script> </head>
<body>
<div id="app">
<input v-model="newTodo" v-on:keyup.enter="addTodo" />
<ul>
<li v-for="todo in todos">
<span>{{todo.text}}</span>
<button v-on:click="removeTodo($index)">X</button>
</li>
</ul>
</div>
<script>
new Vue({
el:"#app",
data:{
newTodo:"",
todos:[
{text:'add some todos'}
]
},
methods:{
addTodo:function(){
var text = this.newTodo.trim();
if(text){
this.todos.push({text:text});
this.newTodo = '';
}
},
removeTodo:function(index){
this.todos.splice(index, 1);
}
}
}); </script>
</body>
</html>
效果：