vue组件表单数据回显验证及提交的示例分析

这篇文章主要介绍vue组件表单数据回显验证及提交的示例分析，文中介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们一定要看完！

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

代码如下：

<template>  <div class="index">  <!--header-bar></header-bar-->  <div >  <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 ><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>

以上是“vue组件表单数据回显验证及提交的示例分析”这篇文章的所有内容，感谢各位的阅读！希望分享的内容对大家有帮助，更多相关知识，欢迎关注亿速云行业资讯频道！