欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

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

程序员文章站 2022-05-26 13:59:44
1、使用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实现双向数据绑定方法(表单自动赋值、表单自动取值)

以上这篇vue.js实现双向数据绑定方法(表单自动赋值、表单自动取值)就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持。