Vue.js 综合
<!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>
效果：
總結(jié)
- 上一篇： 黄聪： Bootstrap之Form表单
- 下一篇： Vue.js之组件及其易错点