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

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

  
    请输入物损查看信息
    

      
      报案信息
    
    

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

 
 Runoob
      
    
    
      
 
 helongjun
 

 
 longjun
      
    
    
      
 
 testOne
 

 
      
    
    
      
 
   选择一个网站
   baidu
   Google
 
      
    
    
      暂存(S)
      返回(F)
    
  
  
  
  
  
  

#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){
    
    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;
};

#使用实例