一个数据绑定和更新Vue.js层表的例子

首先，使用Vue.js绑定数据和更新事件

使用v-on绑定事件，直接传递事件中的数据，在update方法中直接取出需要更新的数据

div id=' content ' table class=' my table ' tr class=' header ' t select/TDT username/TDT student number/TDT class/TDT operation/TD TD/tr tr v-for=' my data中的项目' t input type=' checkbox ' : value=' item。id '/TD/TD { { item }。UserName}}/td td{{item。number } }/TD TD { { item }。class } }/Tdtd a href=' # ' Rel=' external nofollow ' Rel=' external nofollow ' v-: click=' u delete(item . id)' delete/a href=' # Rel=' external nofollow ' Rel=' external nofollow ' v-: click=' update u(item)' update/a/TD/tr/table/div//实例化vue.js(用于为表提供数据)Varvm=newvue ({el:' # content ')，data效果如下：

2.单击更新事件弹出图层更新框

先写html

@ *为图层的弹出图层提供数据* @ div id=' updatecontent ' style=' display : none ' table style=' margin-top :20 px；边距-left :23 px；'Tr TD username :/TD TD TD input type=' text ' v-model=' user info . username '/TD/Tr TD TD student id :/TD TD TD input type=' text ' v-model=' user info . number '/TD/Tr Tr TD class :/TD TD TD输入type=' text ' v-model=' user info . class '/TD/Tr/table/div弹出层

Updateu:函数(项)//update { layer . open({ type :1，title:' update '，area: ['300px '，' 230px']，content3360 $ ('# updatecontent ')，Btn 3360[' save ']，yes :函数(index) {alert('单击save ')；}，cancel:函数(){//点击关闭按钮} })；}效果如下：

三：为层弹箱提供良好的数据

传统的方法是一个一个地取出值，然后分配给文本框。现在您可以使用vue.js绑定它们一次

实例化一个vue，为项目符号框中的文本框提供数据

//将data varupdate _ VM=newvue添加到更新div ({el:' # updatecontent '，data : { user info 3360 } })；当我们单击更新按钮时，我们已经通过一个对象传递了这一行的值，

直接绑定到vue.js

Updateu:函数(项)//update {update_vm。$ data.userinfo=item}通过这种方式，您可以在单击时获得需要更新的数据

而且由于双向绑定，当文本框改变时，表格内容也会自动改变

四：点击保存更新

传统的方式是获取更新后的值，即获取id较多的文本框的值，然后组装成json对象，在后台传递即可更新。

您可以通过使用vue.js来避免它

自己组装对象，因为是双向绑定，文本框的值会改变，模型值会自动改变

我们只是将模型的值发送回后台进行更新

Layer.open ({Type: 1，Title :' Update '，Area : ['300px '，' 230px']，Content 3360 $ ('# Update Content '))，BTN 3360 ['Save']，Yes:函数(index) {//调用后台实现更新$。post ('/home/updateu '，update _ vm。$ data.userinfo，函数(结果){ })；}，cancel:函数(){//点击关闭按钮} })；直接在后台使用ef更新即可

//更新公共JSON结果update u(user sinfo){ testentities en=new testentities()；恩。EntryUsers(uinfo)。状态=系统。数据。实体状态。已修改；int计数=en。saveChanges()；返回Json(计数)；}以上更新是使用vue层实现的。没有地方整理数据，需要关注数据本身。

如果您不想在更改文本框的值时自动更改表，可以克隆一个对象并绑定它

因为这样，如果用户单击关闭，他需要将自己恢复到数据中，而无需更新

使用jquery克隆并绑定一个对象

Updateu:函数(项)//更新{//克隆一个对象var databack=$。扩展({}，item)；更新虚拟机。$ data . user info=data back；}在这种情况下，数据库会更新，页面不会更新，因此您可以直接刷新页面

当然，也可以使用update Model更新页面，直接替换vue.js数据更新页面

$.post ('/home/updateu '，update _ VM。$ data.userinfo，function(result){//可以替换vue.js数据来更新页面VM。$ data.mydata.split (index，index，update _ VM。$ data . user info)；});上述Vue.js Layer表的数据绑定和更新的例子，都是边肖分享的内容。希望能给大家一个参考，支持我们。