<!DOCTYPE HTML><html> <head>...
<!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>
效果：
版权声明
本文仅代表作者观点，不代表百度立场。
本文系作者授权百度百家发表，未经许可，不得转载。
上一篇：Vue.js hello world 下一篇：git使用总结
