<!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>
效果：
