接上篇，在本篇中，我们将要实现如下，功能，编辑和查询，我们当前的todolist程序，和线上其它的demo程序不同，我们会对其进行增删改查的基本操作，之后进行进一步的完善，按照常规的系统使用经验，一般我们新增和编辑都是在模态框中处理，这里我们不会去构建复杂的模态框，只用一个简单的div层来代替，后期接下来的文章中我们会重复造轮子，构建我们自己的轻量级框架（UI库）。
首先，我们对我们的页面结构进行一下简单的调整，加入bootstrap只是为了让页面不那么赤裸裸，对其它不会有任何影响
<!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> <link href="https://cdn.bootcss.com/bootstrap/4.0.0-alpha.6/css/bootstrap.css"> </head> <body> <div> <div> <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> <div> <div> <label for="title">title:</label> <input type="text" v-model="title"> </div> <div> <label for="desc">desc</label> <input type="text" v-model="desc"> </div> <div> <input type="button" value="OK" v-on:click="addItem()" /> </div> </div> </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>
js没有任何变化，只是引入了bootstrap4之后，对html结构进行了微调整，由于我们需要增加编辑操作，我们把增加编辑操作归纳为以下几个步骤：
1、增加编辑按钮；
2、点击编辑按钮绑定所对应todoitem到表单进行编辑
3、点击表单中OK按钮，对编辑结果进行应用。
注意：这里需要区分，在点击OK按钮时，进行的是新增操作还是编辑操作，我们对我们数据结构加入自增ID来标示，如果编辑项目有ID，则为保存编辑操作，如果不存在ID则为新增保存操作，对我们的数据结构进行以下微调，由于新增了ID项目，那么在data属性中也要增加ID属性，这样每次新增属性都要直接修改data属性，这就是变化点，下面我们对变化点进行简单封装，修改代码如下：
data: { todolist: [], todoItem:{ id:'', title:'', desc:'' } },
另外我们需要实现自增ID，这里采用最直接的方式，全局ID，使其自增即可，对TodoItem进行简单的闭包处理：
var TodoItem = (function () { var id = 1; return function (title, desc) { this.title = title; this.desc = desc; this.id = id++; } })();
为了适应新数据结构的变化，则其它修改部分整体贴出来，变化部分见黄色：
<!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> <link href="https://cdn.bootcss.com/bootstrap/4.0.0-alpha.6/css/bootstrap.css"> </head> <body> <div> <div> <table> <tr> <th></th> <th>title</th> <th>desc</th> <th></th> </tr> <tr v-for="(todoItem,index) in todolist"> <th>{{todoItem.id}}</th> <td>{{todoItem.title}}</td> <td>{{todoItem.desc}}</td> <td><input type="button" value="remove" @click="remove(index)" /></td> </tr> </table> </div> <div> <div> <label for="title">title:</label> <input type="hidden" v-bind:value="todoItem.id" /> <input type="text" v-model="todoItem.title"> </div> <div> <label for="desc">desc</label> <input type="text" v-model="todoItem.desc"> </div> <div> <input type="button" value="OK" v-on:click="addItem()" /> </div> </div> </div> <script> var TodoItem = (function () { var id = 1; return function (title, desc) { this.title = title; this.desc = desc; this.id = id++; } })(); new Vue({ el: '#app', data: { todolist: [], todoItem: { id: '', title: '', desc: '' } }, methods: { addItem: function () { // this.todolist.push(new TodoItem(this.title, this.desc)) this.todolist.push( new TodoItem( this.todoItem.title, this.todoItem.desc ) ); this.todoItem={}; }, remove: function (index) { this.todolist.splice(index, 1); } } }) </script> </body> </html>
刷新页面，测试效果如下：
