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){ 对需要绑定的对象进行解析成Vue支持的格式VueFormSub.ObjConvert = function(dataObj){
#初始化数据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的值一样
相关内容
|