Vue.js实现双向数据绑定方法(表单自动赋值、表单自动取值)

1、使用Vue.js实现双向表单数据绑定,例子

财产查勘处理

报案信息


损失方
联系人
联系方式
损失方1
联系人1
联系方式1
查勘估损金额 *
施救费金额
需要施救 是否需要
查勘估损金额1 *
施救费金额1
需要施救1 没错必须
查勘地点 *
查勘日期
施救过程描述
备注



暂存(S)
//实现取值
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;
};

#初始化数据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的值一样