Vue.js实现双向数据绑定（表单自动赋值、表单自动取值）

最新推荐文章于 2024-04-29 03:08:36 发布
最新推荐文章于 2024-04-29 03:08:36 发布
阅读量2w 收藏 9
点赞数 1
分类专栏： JavaScript 文章标签： 表单 javascript vue 双向绑定 vue绑定表单
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/lovelongjun/article/details/73371846
版权

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" />
<link rel="stylesheet" type="text/css" href="../css/bootstrap.min.css" />
<link rel="stylesheet" type="text/css" href="../css/AdminLTE.min.css" />
<link rel="stylesheet" type="text/css" href="../css/propertySurvey.css" />
</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>

最终效果：
这里写图片描述

藏海花无花
关注
  • 1
    点赞
  • 踩
  • 9
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
vue 给checkbox 赋值_Vue动态生成el-checkbox点击无法赋值的解决方法
weixin_30877741的博客
01-17 981
前言最近遇到一个问题，在一个页面需要动态渲染页面内的表单，其中包括 checkbox 表单类型，并且使用 Element 组件 UI 时，此时 v-model 绑定的数据也是动态生成的例如：定义的 data 的 form 里面是空对象，需要动态生成里面的 keyexport default {data() {return {form: {}}},}从后端接口得到 checkList，这个就是动态生...
vue 给checkbox 赋值_解决 Vue 动态生成 el-checkbox 点击无法赋值问题(示例代码)
weixin_29217235的博客
02-22 734
最近遇到一个问题，在一个页面需要动态渲染页面内的表单，其中包括 checkbox 表单类型，并且使用 Element 组件 UI 时，此时 v-model 绑定的数据也是动态生成的例如：定义的 data 的 form 里面是空对象，需要动态生成里面的 keyexport default {data() {return {form: {}}},}从后端接口得到 checkList，这个就是动态生成的...
Vue.js实现双向数据绑定方法(表单自动赋值、表单自动取值)
10-18
今天小编就为大家分享一篇Vue.js实现双向数据绑定方法(表单自动赋值、表单自动取值)，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
VUE element-ui 之table表格勾选复选框动态带出（将某列的值赋值给指定列）对应列的数据_vue elementui table实现动态勾选计算某一列的值
最新发布
2401_84434331的博客
04-29 420
【代码】VUE element-ui 之table表格勾选复选框动态带出（将某列的值赋值给指定列）对应列的数据_vue elementui table实现动态勾选计算某一列的值。
VUE element-ui 之table表格勾选复选框动态带出（将某列的值赋值给指定列）对应列的数据
HanXiaoXi_yeal的博客
01-06 2728
需求： 1. 发货数量默认为0，用户可自行输入； 2. 点击复选框将未发货数动态赋值给发货数，取消复选发货数为0； 3. 点击全选框将每行的未发货数赋值给对应发货数，取消全选发货数为0。 实现步骤： 画重点： 1.模板定义 <el-table v-show="order" ref="multipleTable" :v-loading="loading" border :data="tableDataOrder" height="69vh" style="width: 100
antd vue3 form 表单的赋值和取值问题
2301_77643651的博客
06-14 3718
当点击编辑的时候给form表单赋值，如下图。最后在记录一下table 渲染按钮。
vue 给form表单赋值_Vue.js实现双向数据绑定方法(表单自动赋值、表单自动取值)...
weixin_39906358的博客
12-20 1213
//实现取值var VueFormSub = function(formid){this.$form = ($("#" + formid).length !=0)?$("#" + formid):$("."+formid);var models = $("*[v-model != '']",this.$form);var vueData = {};$.each(models,function(id...
vue.js使用v-model实现表单元素(input) 双向数据绑定功能示例
10-17
主要介绍了vue.js使用v-model实现表单元素(input) 双向数据绑定功能,结合完整实例形式分析了v-model实现表单input元素数据双向绑定相关操作技巧,需要的朋友可以参考下
vue.js的双向数据绑定Object.defineProperty方法的神奇之处
12-12
vue.js 2.0版的双向数据绑定就是通过Object.defineProperty方法实现的，俗称属性拦截器。 这么说吧，vue.js是通过它实现双向绑定的。俗称属性拦截器。而且专门用来监控对象属性变化的Object.observe方法也被草案发起...
input动态赋值
小包同学_
06-14 505
【代码】input动态赋值。
解决 Vue 中的Element-ui 组件el-checkbox动态赋值点击没反应问题
热门推荐
Qensq的博客
11-21 1万+
&lt;el-checkbox :value="form.reaudit === '1'" @change="val =&gt; $set(form,'reaudit',val ? '1' : '0')"&gt;是否需要复核&lt;/el-checkbox&gt; data() { return { form: { reaudit: '' } }...
Vue 中的Element-ui 组件el-checkbox动态赋值点击没反应问题
江湖行骗老中医
12-16 2472
原因：这是 vue 的深入响应式原理，官方说法和解决方法： Vue 不允许在已经创建的实例上动态添加新的根级响应式属性 (root-level reactive property) 解决办法： 在index.vue中获取数据，放在vuex中 然后在组件中的data属性上去获取该数据 <el-checkbox v-model="item.checked" :label="item.label" v-for="(item,key,index) in checkOptions" :key...
vue.js表格赋值_Vue.js+Layer表格数据绑定与实现更新的实例
weixin_36323601的博客
01-30 397
一：先使用vue.js绑定好数据与更新事件使用v-on绑定好事件,在事件里边直接把该行数据传递进去，在更新方法里边就可以直接取出需要更新的数据选择用户名学号班级操作{{item.username}}{{item.number}}{{item.class}}删除更新//实例化vue.js(用来给表格提供数据的)var vm = new vue({el: '#content',data: {mydat...
056.record类型的初始化，赋值，以及使用
dosdiosas_的博客
05-05 997
关于线面的一部分代码 String类型在声明的时候已经指出，一个字符串需要定义为多少个字符，那么在实际赋值的时候，必须严格按照他声明的大小来进行赋值，比如Name :String(1…15); 在对Name变量进行初始化传值的时候必须赋以一个长度为15的字符串(含空格)，如果要传入的名字字符串的长度小于15那么需要在后面补齐所缺少的字符串，这里一般是利用空格作为填充。 with Ada.Text_...
解决深拷贝v-model动态绑定问题，以及v-for里checkbox动态赋值问题
black1java的博客
03-18 714
记录关于CheckBox的坑
如何理解vue.js的双向数据绑定
03-28
v-model指令可以将表单元素的值绑定到Vue实例的数据属性上，并在表单元素的值发生变化时自动更新数据属性的值，从而实现双向数据绑定。例如，可以将input元素的值绑定到Vue实例的message属性上，如下所示： ``` ``...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值