Vue.js进阶【3】纯Vue实现单页面-列表增删改查

增删改查最能代表一个技术的完备性的，下面就展示Vue的增删改查，为了界面的美观实用了bootstrap

仔细阅读下面的代码，即可领会其意思。不懂的标签和元素百度查一下一查一大堆。很快就可以理解了

运行：直接右键HTML文件选择谷歌浏览器打开即可

运行效果

逻辑：全都是客户端自己提供数据，与服务端没有交互

用户管理

{{headitem}}
{{row.Name}}	{{row.Age}}	{{row.School}}	{{row.Remark}}	编辑  删除
		中山小学 　　　　　　　　　　　　　　　　复兴中学 　　　　　　　　　　　　　　　　光明小学		保存

列表： {{row.Name}} 1 数据rows就是Vue构造函数中data对象的一级子成员,Vue的构造函数使用了类似解构复制的方式创建了成员，使得可以在vue的作用域内直接使用this.rows this.rowtemplate的方式来操作，因为他们已经是Vue对象的直接成员变量了。

2 可以看出来列表是用v-for来实现的；包括表头也是用v-for来加载创建的

3 表格是用循环迭代tr/td来创建的；

4 每一行数据都可以通过vue来通过v-for中的row来获取；行数据其实存储在DOM对象的树成员之上和Vue中的data已经没有了关系；

编辑：

编辑使用了标准的input标签；

样式使用了Bootstrap表单的form-control；

数据绑定用了vue的双向绑定v-model=“rowtemplate.Remark”，其中的rowtemplate是Vue对象的成员变量。

保存UI：

保存 保存时在表格中防止了一个Bootstrap风格的按钮，按钮的点击使用了vue的v-on:click

保存vue：

保存函数只需要拿到vue的rowtemplate成员，将这个成员追加到自己的另一个数组数据成员rows中即可。因为这两个数据成员都在界面上双向绑定了界面元素。

保存的时候做了最简单的有效性检查：输入的名称不能为空值。

保存完了记得要重置rowtemplate成员变量，从而为下次保存做准备。如果不及时重置就会因为脏数据而影响下次保存。

删除：

使用了列表内部创建连接的形式，并给链接增加点击相应事件来实现编辑和删除按钮，点击事件使用vue的v-on:click

编辑  
删除
代码百度云下载

---

作者：CalmReason
来源：CSDN
原文：https://blog.csdn.net/calmreason/article/details/82558975
版权声明：本文为博主原创文章，转载请附上博文链接！