vue实现形式表单与桌子表格的数据关联功能示例

本文实例讲述了某视频剪辑软件实现形式表单与桌子表格的数据关联功能。分享给大家供大家参考，具体如下：

！doctype html html lang=' en ' head meta charset=' UTF-8 ' meta name=' viewport ' content=' width=设备宽度，用户可缩放=否，初始比例=1.0,最大比例=1.0,最小比例=1.0 ' meta http-equiv=' X-UA-Compatible '内容=' ie=edge ' titlewww.jb51.net vue表单表单数据关联/title style * { margin : 0；padd : 0；列表样式：无；}输入{左边距： 50px} span { margin-left : 50px；}选择{左边距： 50px} .创建{左边距-: 150像素；}/style/head dyform id=' app '字段集legendCreat New Person/legend span name :/span put type=' text ' v-model=' text 0 ' br span age :/span put type=' text ' value=' 0 ' v-model=' text 1 ' br span sex 3360/span选择v-model=' text 2 '选项男/选项女/选项./option/select br button class=' create ' @ click=' add ' create/button/field set table trtdName/TDT dage/TDT sex/TDT delete/TD/tr tr v-for=' x in person ' TD { { x . Name } }/tdtd { { x . Age } }/tdtd { { x . sex } }/TDT button @ click=' fun ' delete/button/TD/tr/table/form/body script src=' http 33603https://cdn .} }，fun(){ this。人。pop()} } })/script/html运行效果如下图所示：

希望本文所述对大家vue.js程序设计有所帮助。