Vue.js实现双向数据绑定方法(表单自动赋值、表单自动取值)
1、使用Vue.js实现双向表单数据绑定，例子
<!--html代码-->
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>财产查勘处理</title>
<link rel="stylesheet" type="text/css" href="../css/global.css" rel="external nofollow" />
<link rel="stylesheet" type="text/css" href="../css/bootstrap.min.css" rel="external nofollow" />
<link rel="stylesheet" type="text/css" href="../css/AdminLTE.min.css" rel="external nofollow" />
<link rel="stylesheet" type="text/css" href="../css/propertySurvey.css" rel="external nofollow" />
</head>
<body>
<div class="container-fluid">
<div style="text-align: center; height:30px;background:#F4F9FD;padding:10px 0px;border-bottom:1px solid #000; font-weight: bold;">请输入物损查看信息</div>
<h4 class="box-title">
<i class="glyphicon glyphicon-play-circle" style="color: #82C542;"></i>
报案信息
</h4>
<hr style="height: 3px; border: none; border-top: 3px solid #75C2D2;" />
<div class="row text-center" style="margin-top: -23px; padding: 3px 50px; border-bottom: 1px solid #DBEEF1;">
<div style="width: 33%; float: left; text-align: left;">
<label>损失方</label><input v-model="RegistInfo_name" type="text" name="RegistInfo_name"/>
</div>
<div style="width: 33%; float: left; text-align: left;">
<label>联系人</label><input v-model="RegistInfo_user" type="text" name="RegistInfo_user"/>
</div>
<div style="width: 33%; float: right; text-align: left;">
<label>联系方式</label> <input v-model="RegistInfo_phone" name="RegistInfo_phone" type="text"/>
</div>
</div>
<div class="row text-center" style="margin-top: -23px; padding: 3px 50px; border-bottom: 1px solid #DBEEF1;">
<div style="width: 33%; float: left; text-align: left;">
<label>损失方1</label><input v-model="Prplregist_name" type="text" name="Prplregist_name"/>
</div>
<div style="width: 33%; float: left; text-align: left;">
<label>联系人1</label><input v-model="Prplregist_user" type="text" name="Prplregist_user"/>
</div>
<div style="width: 33%; float: right; text-align: left;">
<label>联系方式1</label> <input v-model="Prplregist_phone" name="Prplregist_phone" type="text"/>
</div>
</div>
<div class="row text-center" style="padding: 3px 50px; border-bottom: 1px solid #DBEEF1;">
<div style="width: 33%; float: left; text-align: left;">
<label>查勘估损金额</label> <input v-model="RegistInfo_chakan_money" name="RegistInfo_chakan_money" type="text" value="400.00" /> *
</div>
<div style="width: 33%; float: left; text-align: left;">
<label>施救费金额</label> <input v-model="RegistInfo_rescue_money" name="RegistInfo_rescue_money" type="text" name="" id="" value="0.00" />
</div>
<div style="width: 33%; float: right; text-align: left;">
<label>需要施救</label> <input type="checkbox" />是否需要
</div>
</div>
<div class="row text-center" style="padding: 3px 50px; border-bottom: 1px solid #DBEEF1;">
<div style="width: 33%; float: left; text-align: left;">
<label>查勘估损金额1</label> <input v-model="Prplregist_chakan_money" name="Prplregist_chakan_money" type="text" value="400.00" /> *
</div>
<div style="width: 33%; float: left; text-align: left;">
<label>施救费金额1</label> <input v-model="Prplregist_rescue_money" name="Prplregist_rescue_money" type="text" name="" id="" value="0.00" />
</div>
<div style="width: 33%; float: right; text-align: left;">
<label>需要施救1</label> <input type="checkbox" />是<input type="checkbox" />没错<input type="checkbox" />必须
</div>
</div>
<div class="row text-center" style="padding: 3px 50px; border-bottom: 1px solid #DBEEF1;">
<div style="width: 67%; float: left; text-align: left;">
<label>查勘地点</label> <input v-model="address" name="address" type="text" style="width: 400px;" /> *
</div>
<div style="width: 33%; float: left; text-align: left;">
<label>查勘日期</label> <input v-model="RegistInfo_chakan_data" name="RegistInfo_chakan_data" type="text" name="" id="" value="2017-03-09" />
</div>
</div>
<div class="row text-center" style="padding: 3px 50px; border-bottom: 1px solid #DBEEF1;">
<div style="height: 50px; text-align: left;">
<label>施救过程描述</label> <input v-model="RegistInfo_say" name="RegistInfo_say" type="text" style="width: 900px; height: 50px;" />
</div>
</div>
<div class="row text-center" style="padding: 3px 50px; border-bottom: 1px solid #DBEEF1;">
<div style="height: 50px; text-align: left;">
<label>备注</label> <input v-model="remark" name="remark" type="text" style="width: 900px; height: 50px;" />
</div>
</div>
<div class="row text-center" style="padding: 3px 50px; border-bottom: 1px solid #DBEEF1;">
<div style="height: 50px; text-align: left;">
<select class="select2">
<option value="123" id="sel1">123</option>
<option value="456" id="sel2">456</option>
<option value="789" id="sel3">789</option>
</select>
</div>
</div>
<div class="row text-center" style="padding: 3px 50px; border-bottom: 1px solid #DBEEF1;">
<div style="height: 50px; text-align: left;">
<input type="radio" id="google" value="Google" v-model="RegistInfo_radio" name="RegistInfo_radio">
<label for="google">Google</label>
<br>
<input type="radio" id="runoob" value="Runoob" v-model="RegistInfo_radio" name="RegistInfo_radio">
<label for="runoob">Runoob</label>
</div>
</div>
<div class="row text-center" style="padding: 3px 50px; border-bottom: 1px solid #DBEEF1;">
<div style="height: 50px; text-align: left;">
<input type="radio" id="helongjun" value="helongjun" v-model="RegistInfo_helongjun" name="RegistInfo_helongjun">
<label for="helongjun">helongjun</label>
<br>
<input type="radio" id="longjun" value="longjun" v-model="RegistInfo_helongjun" name="RegistInfo_helongjun">
<label for="longjun">longjun</label>
</div>
</div>
<div class="row text-center" style="padding: 3px 50px; border-bottom: 1px solid #DBEEF1;">
<div style="height: 50px; text-align: left;">
<input type="radio" id="testOne" value="testOne" v-model="testOne" name="testOne">
<label for="helongjun">testOne</label>
<br>
<!--<input type="radio" id="testOne" value="testTwo" v-model="testOne" name="testOne">
<label for="longjun">testTwo</label>-->
</div>
</div>
<div class="row text-center" style="padding: 3px 50px; border-bottom: 1px solid #DBEEF1;">
<div style="height: 50px; text-align: left;">
<select v-model="RegistInfo_selected" name="RegistInfo_selected">
<option value="">选择一个网站</option>
<option value="baidu">baidu</option>
<option value="google">Google</option>
</select>
</div>
</div>
<div class="text-center row">
<button>暂存(S)</button>
<button onclick="getInputVal()">返回(F)</button>
</div>
</div>
<script type="text/javascript" src="../js/vue.min.js" ></script>
<script type="text/javascript" src="../js/jquery-1.11.0.min.js"></script>
<script type="text/javascript" src="../js/bootstrap.min.js"></script>
<script type="text/javascript" src="../js/bootstrap-datetimepicker.min.js"></script>
<script type="text/javascript" src="../VueFormSub.js" ></script>
#VueFormSub.js（实现双向绑定主要代码）
//实现取值
var VueFormSub = function(formid){
this.$form = ($("#" + formid).length !=0)?$("#" + formid):$("."+formid);
var models = $("*[v-model != '']", this.$form);
var vueData = {};
$.each(models,function(idx,dom){
var key = $(dom).attr("name");
if (undefined != key){
var dValue = $(dom).val();
$(dom).val(dValue);
var beanName = key.split("_");
if(beanName.length < 2){
vueData[beanName] = dValue;
vueData[beanName] = $("input[type='radio'][name='"+key+"']:checked").val();
}else{
if(vueData[beanName[0]] == undefined){
vueData[beanName[0]] = {};
}else{
if($(dom).attr("type") == "radio"){
var tempVal = $("input[type='radio'][name='"+key+"']:checked").val();
vueData[beanName[0]][beanName[1]] = tempVal;
}else{
vueData[beanName[0]][beanName[1]]=dValue;
}
}
}
}
});
return vueData;
};
#初始化Vue表单数据(可以只传入initDate数据源，formid需要绑定的dom)
VueFormSub.initVue = function(initDate,formid,httpMethod, url, params){
if(initDate instanceof Object){
/*if(initDate.length !=0){}*/
var initJson = VueFormSub.ObjConvert(initDate);
new Vue({
el : ($("#"+formid).length != 0)?'#'+formid:'.'+formid,
data : initJson
});
}else{
if (httpMethod != "get" && params && typeof (params) == "object"){
params = JSON.stringify(params);
}
if(params!= null){
params.rs = Math.random();
}else{
params = {'rs':Math.random()};
}
$.ajax({
type: httpMethod,
url: "/cxh" + url,
data: params,
cache:false,
async: true,
contentType: 'application/json',
dataType: 'json',
success: function (returnData) {
if(returnData.length != 0){
var vueDate = VueFormSub.ObjConvert(returnData);
new Vue({
el:($("#"+formid).length != 0)?'#'+formid:'.'+formid,
data : vueDate
});
}
}
});
}
};
#对需要绑定的对象进行解析成Vue支持的格式
VueFormSub.ObjConvert = function(dataObj){
var json = {};
$.each(dataObj,function(id,param){
if(param instanceof Object){
$.each(param, function(rid,rparam){
if(rparam instanceof Object){
json[id] = VueFormSub.ObjConvert(param);
}else{
json[id+"_"+rid] = rparam;
}
});
}else{
json[id]=param;
}
});
return json;
};
#使用实例
<script>
#初始化数据data
var initVue = {
RegistInfo_name : 'legend',
RegistInfo_user : '龙军',
RegistInfo_phone : '1008611',
RegistInfo_chakan_money : '100',
RegistInfo_rescue_money : '1000',
address : '广东省汕头市潮南区',
RegistInfo_chakan_data : '2017-5-7',
RegistInfo_say : '这个只是测试用的',
remark : '龙军用来测试的',
Prplregist_name : '林总',
Prplregist_user : '林老板',
Prplregist_phone : '10010',
Prplregist_chakan_money : '一万块',
Prplregist_rescue_money : '一个亿',
RegistInfo_radio : "Runoob",
RegistInfo_selected : "google",
RegistInfo_helongjun : "helongjun",
testOne:""
};
//初始化Vue表单
VueFormSub.initVue(initVue,"container-fluid");
//返回按钮单击
function getInputVal(){
//调用自动表单封装
var resultVal = new VueFormSub("container-fluid");
console.log(resultVal);
}
#注意：input表单中的name属性必须指定，最好和input表单中的v-model的值一样
<script>
最终效果：
以上这篇Vue.js实现双向数据绑定方法(表单自动赋值、表单自动取值)就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持呐喊教程。
声明：本文内容来源于网络，版权归原作者所有，内容由互联网用户自发贡献自行上传，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任。如果您发现有涉嫌版权的内容，欢迎发送邮件至：notice#nhooo.com（发邮件时，请将#更换为@）进行举报，并提供相关证据，一经查实，本站将立刻删除涉嫌侵权内容。
基础教程
- HTML基础教程
- HTML5基础教程
- HTML参考手册
- SVG 教程
- CSS 教程
- CSS 参考手册
- CSS3教程
- Bootstrap3 教程
- Bootstrap4 教程
- Font Awesome图标
- JavaScript 教程
- JavaScript 参考手册
- jQuery 教程
- AJAX 教程
- JSON 教程
- AngularJS 教程
- ReactJS 教程
- NodeJS 教程
- Python 教程
- C++ 教程
- Golang 教程
- C 语言教程
- PHP 教程
- C# 教程
- LINQ 教程
- Lua 教程
- Ruby 教程
- Rust 教程
- Linux 教程
- R 语言教程
- Docker 教程
- Scala 教程
- MatLab 教程
- Erlang 教程
- Pandas教程
- Numpy教程
- Matplotlib教程
- Flask教程
- Java 教程
- SpringBoot 教程
- JDBC 教程
- JSP 教程
- Servlet 教程
- Maven 教程
- Spring 教程
- Django 教程
- Swift 教程
- Kotlin 教程
- SQL 教程
- MongoDB 教程
- SQLite 教程
- PostgreSQL 教程
- MySql 教程
- Redis 教程
- Elasticsearch 教程
猜你喜欢
- pycharm安装和首次使用教程
- 最适应的vue.js的form提交涉及多种插件【推荐】
- vue里面v-bind和Props 利用props绑定动态数据的方法
- Java线程同步方法实例总结
- vue.js中toast用法及使用toast弹框的实例代码
- 对Vue- 动态元素属性及v-bind和v-model的区别详解
- Java泛型定义与用法实例详解
- Spring Cloud升级最新Finchley版本的所有坑
- Windows下PyCharm安装图文教程
- Golang中匿名组合实现伪继承的方法
- VUE-Table上绑定Input通过render实现双向绑定数据的示例
- vue监听input标签的value值方法
- vue打包使用Nginx代理解决跨域问题
- Java集合定义与用法实例总结【Set、List与Map】
- Vue cli构建及项目打包以及出现的问题解决
- Vue.js实现双向数据绑定方法(表单自动赋值、表单自动取值)
- python 3.7.0 安装配置方法图文教程
- vue实例中data使用return包裹的方法
- 详解Spring Boot 配置加载顺序及属性加载顺序
- MySQL 5.7.22 二进制包安装及免安装版Windows配置方法
- vue项目打包部署到服务器的方法示例
- 解决vue中修改了数据但视图无法更新的情况
- CentOS7.2 忘记root密码及重置root密码的简单处理方法
- Docker容器使用jenkins部署web项目(总结)
- python 3.7.0 下pillow安装方法