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

代码如下：

<template> <div class="index"> <!--header-bar></header-bar--> <div style="margin:20px;"> <div class="item"> <p>住户名称:</p> <p> <input type="text" value="username" v-model="formStatus.username" placeholder="输入名称"> </p> </div> <div class="item"> <p>住户类型:</p> <p> <label v-for="(item, index) in zhuhuType"> <span>{{item.name}}</span> <input type="radio" name = "zhuhutype" :value="item.id" :checked="item.isChecked" @click="changeZh(index)" v-model="formStatus.zhuhuType"> </label> </p> </div> <div class="item"> <p>设备名称:</p> <p> <label v-for="(item, index) in shebeiType"> <span>{{item.name}}</span> <input type="checkbox" :value="item.id" :checked="item.isChecked" @click="changeSb(index)" v-model="formStatus.shebeiType"> </label> </p> </div> <div class="item"> <p>住户大小:</p> <p> <select v-model="formStatus.zhuhudaxiao"> <option value="0">请选择</option> <option v-for="option in zhuhudaxiao" v-model="zhuhudaxiao" :id = "option.id" :value="option.value" >{{option.name}}</option> </select> </p> </div> <div class="item"> <p>住户留言:</p> <p> <textarea value="userword" v-model="formStatus.userword"></textarea> </p> </div> </div> <p style="margin:20px 0;"><button @click="save">点击保存</button></p> </div></template><script> 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); // }); } }</script><style> 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; }</style>