vue组件表单数据回显验证及提交的实例代码
2018-08-30 08:48
1041 查看
最近项目需要到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>
您可能感兴趣的文章:
相关文章推荐
- 表单提交数据的方式 怎么在服务器获取 服务器控件 html服务器控件 提交服务器之前的验证 前台网页编写c#代码
- Struts2表单验证、模型驱动、防重复提交、数据回显笔记整理
- DHTML技术---前端用户提交信息验证和表单提交控制+完整表单验证代码实例
- EasyUI在表单提交之前进行验证的实例代码
- jQuery Ajax提交表单查询获得数据实例代码
- Spring学习笔记2之表单数据验证、文件上传实例代码
- Struts2表单验证、模型驱动、防重复提交、数据回显笔记整理 文章标题
- vue中使用element-ui进行表单验证的实例代码
- Vue循环组件加validate多表单验证的实例
- Vue组件模板形式实现对象数组数据循环为树形结构(实例代码)
- EasyUI在表单提交之前进行验证的实例代码
- vue动态绑定组件子父组件多表单验证功能的实现代码
- 微信小程序服务器请求和上传数据,上传图片并展示,提交表单完整实例代码附效果图
- Angular 开发小妙招1:提交表单数据验证不通过,更改输入组件的样式
- vue中子组件向父组件传递数据的实例代码(实现加减功能)
- Jquery插件easyUi表单验证提交(示例代码)
- 详解vue表单验证组件 v-verify-plugin
- SpringMVC4+thymeleaf3的一个简单实例(form表单数据验证)
- Python 自动化表单提交实例代码
- Vue表单类的父子组件数据传递示例