<table> <tr> <th>title</th> <th>desc</th> </tr> <tr v-for="todoItem in todolist"> <td>{{todoItem.title}}</td> <td>{{todoItem.desc}}</td> </tr> </table>
刷新运行，在表单中输入后，点击add todo item，向数组添加元素，及动态刷新了列表：
有添加就有删除，接下来，我们列表中，增加删除操作，和所有mvvm框架一样，我们考虑的出发点一定要规避dom，一定要从数据驱动UI的方式来思考，如果删掉UI项，那么根据数据驱动UI的理念那么就是删掉数组项，框架会自动帮我们处理dom，基于此修改代码如下：
<table> <tr> <th>title</th> <th>desc</th> <th></th> </tr> <tr v-for="(todoItem,index) in todolist"> <td>{{todoItem.title}}</td> <td>{{todoItem.desc}}</td> <td><input type="button" value="remove" @click="remove(index)" /></td> </tr> </table>
如果按照我们以前angular的使用经验，这里增加的方式有些区别，angular在ng-repeat中有内置变量$index,所以在事件处理上，我们就会通过$index作为数组项索引，事件绑定也会类似ng-click="remove($index)",在vue中就有些区别了，但是却符合数组遍历的方式，大家应该知道数组方法，比如map等，参数是一个function，其中包含两个参数，第一个参数是value，第二个参数是index是一个道理，从这一点上说，这样写很符合道理，因为这本身就是一个循环遍历，同样vue对象methods中添加remove方法。
new Vue({ el: '#app', data: { todolist:[], title:'', desc:'' }, methods:{ addItem:function(){ this.todolist.push(new TodoItem(this.title,this.desc)) this.title=this.desc=''; }, remove:function(index){ this.todolist.splice(index,1); } } })
刷新运行页面：
完整代码如下：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>demo1</title> <script src="https://cdn.bootcss.com/vue/2.4.1/vue.js"></script> <style> table{ margin-top: 5px; width:300px; border-collapse: collapse; border: 1px solid #ccc; } table > tr>th,table>tr>td{ height: 25px; line-height: 25px; } </style> </head> <body> <div> <form> title:<input type="text" v-model="title"> <br> desc:<input type="text" v-model="desc"> <br/> <input type="button" value="add todo item" v-on:click="addItem()" /> </form> <table> <tr> <th>title</th> <th>desc</th> <th></th> </tr> <tr v-for="(todoItem,index) in todolist"> <td>{{todoItem.title}}</td> <td>{{todoItem.desc}}</td> <td><input type="button" value="remove" @click="remove(index)" /></td> </tr> </table> </div> <script> var TodoItem = function (title, desc) { this.title = title; this.desc = desc; } new Vue({ el: '#app', data: { todolist:[], title:'', desc:'' }, methods:{ addItem:function(){ this.todolist.push(new TodoItem(this.title,this.desc)) this.title=this.desc=''; }, remove:function(index){ this.todolist.splice(index,1); } } }) </script> </body> </html>
今天就先到这里，增删改查，查询和修改还没有，放在（二）中进行添加吧，敬请期待。