html表格怎么绑定数据,vue实现form表单与table表格的数据关联功能示例

本文实例讲述了vue实现form表单与table表格的数据关联功能。分享给大家供大家参考，具体如下：

content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">

www.jb51.net vue form表单数据关联

*{

margin: 0;

padding: 0;

list-style: none;

}

input{

margin-left: 50px ;

}

span{

margin-left: 50px ;

}

select{

margin-left: 50px ;

}

.create{

margin-left: 150px ;

}

Creat New Person

Name:

Age:

Sex:

Man

Woman

....

Create

Name	Age	Sex	Delete
{{x.name}}	{{x.age}}	{{x.sex}}	Delete

const app=new Vue({

el:"#app",

data:{

text0:"",

text1:"",

text2:"",

person:[{

name:"Jack",

age:"20",

sex:"man",

},

{

name:"Bill",

age:"24",

sex:"woman",

},

]

},

methods: {

add(){

if (this.text0==""||this.text1==""){

alert("Name Or Age undefined")

}else{

this.person.push({

name: this.text0,

age: this.text1,

sex: this.text2,

});

}

},

fun(){

this.person.pop()

}

}

})

运行效果如下图所示：

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