最近项目需要到vue开发单页面，所以就研究一下表单数据的回显，验证及提交如何用vue组件的方式实现。

代码如下：

import vue from 'vue'

import axios from 'axios';

import elementui from 'element-ui'

import url from '../utils/tools/url.js'

import 'element-ui/lib/theme-chalk/index.css'

vue.use(elementui)

import headerbar from '../modules/headerbar.vue';

export default {

name: 'index',

data (){

return {

zhuhutype: [],

shebeitype: [],

zhuhudaxiao: [],

//绑定改变后的表单值用于提交

formstatus: {

username: "",

zhuhutype: 43,

shebeitype: [52, 23],

zhuhudaxiao: "",

userword: ""

}

}

},

components: { headerbar },

methods: {

getpage (currentpage){

console.log(currentpage);

// this.$http.get("http://192.168.1.200/test.php").then(res=>{

// console.log(res.data);

// });

},

handleedit(index, row) {

console.log(index, row);

},

handledelete(index, row) {

console.log(index, row);

},

save(){

if(this.formstatus.username == ""){

alert("输入名称");

return false;

}

console.log(typeof(this.formstatus.zhuhutype));

if(typeof(parseint(this.formstatus.zhuhutype)) != "number"){

alert("输入住户类型");

return false;

}

if(this.formstatus.shebeitype.length == 0 ){

alert("输入设备名称");

return false;

}

if(this.formstatus.zhuhudaxiao == 0){

alert("选择住户大小");

return false;

}

if(this.formstatus.userword == ""){

alert("输入用户留言");

return false;

}

console.log(this.formstatus);

console.log("####用户名称####");

console.log(this.formstatus.username);

console.log("####住户类型####");

console.log(this.zhuhutype);

console.log("####设备名称####");

console.log(this.shebeitype);

console.log("####住户大小####");

console.log(this.userdxselected);

console.log("####用户留言####");

console.log(this.userword);

},

//住户类型改变数据

changezh(index){

this.zhuhutype.foreach(function(value, index){

value.ischecked = false;

});

this.zhuhutype[index].ischecked = true;

},

//设备选择改变数据

changesb(index){

console.log(index);

this.shebeitype[index].ischecked = !this.shebeitype[index].ischecked;

}

},

created () {

console.log("############");

//用户名称

this.formstatus.username = "用户名称返回的内容";

//循环住户类型

this.zhuhutype = [{

name: '小型住户',

id: '12',

ischecked: false

},{

name: '中型住户',

id: '43',

ischecked: false

},{

name: '大型住户',

id: '72',

ischecked: true

},{

name: '超大型住户',

name: '设备6',

id: '25',

ischecked: false

}];

//循环设备名称

this.shebeitype = [{

name: '设备1',

id: '22',

ischecked: true

},{

name: '设备2',

id: '23',

ischecked: false

},{

name: '设备3',

id: '52',

ischecked: true

},{

name: '设备6',

id: '65',

ischecked: false

}];

//住户大小

this.zhuhudaxiao = [{

name: "100平米",

id: 1,

value: 1

},{

name: "80平米",

id: 2,

value: 2

},{

name: "70平米",

id: 3,

value: 3

}];

//住户大小

this.formstatus.zhuhudaxiao = 2;

//用户名称

this.formstatus.userword = "用户留言返回的内容";

// axios.get("/test.php").then(res=>{

// this.table = this.table.concat(res.data.data);

// console.log(res.data);

// });

}

}

select{height:40px;width:100px;}

.el-button--mini, .el-button--mini.is-round{}

*{margin:0;padding:0;font-family:"微软雅黑";}

button{height:40px;width:100px;margin-left:20px;}

.item p{padding:10px 0;}

.table, .page{

width:900px;

height:auto;

margin:20px auto;

}

label{

padding:10px 20px;

margin:10px;

border:1px solid #eee;

}

body{padding-top:80px;}

.header{

position:fixed;

top:0;

width:100%;

background:#eee;

}

.header ul{

height:80px;

width:1000px;

}

.header ul li{

float:left;

width:200px;

font-size:14px;

line-height:80px;

text-align:center;

}

.header ul li a{

display:block;

}

如您对本文有疑问或者有任何想说的，请点击进行留言回复，万千网友为您解惑！