Vue.js如何實現(xiàn)雙向數(shù)據(jù)綁定方法

發(fā)布時間：2021-04-20 10:34:33 來源：億速云閱讀：135 作者：小新欄目：web開發(fā)

這篇文章給大家分享的是有關(guān)Vue.js如何實現(xiàn)雙向數(shù)據(jù)綁定方法的內(nèi)容。小編覺得挺實用的，因此分享給大家做個參考，一起跟隨小編過來看看吧。

js的作用是什么

1、能夠嵌入動態(tài)文本于HTML頁面。2、對瀏覽器事件做出響應(yīng)。3、讀寫HTML元素。4、在數(shù)據(jù)被提交到服務(wù)器之前驗證數(shù)據(jù)。5、檢測訪客的瀏覽器信息。6、控制cookies，包括創(chuàng)建和修改等。7、基于Node.js技術(shù)進行服務(wù)器端編程。

1、使用Vue.js實現(xiàn)雙向表單數(shù)據(jù)綁定，例子

<!--html代碼-->
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>財產(chǎn)查勘處理</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 >請輸入物損查看信息</div>
    <h5 class="box-title">
      <i class="glyphicon glyphicon-play-circle" ></i>
      報案信息
    </h5>
    <hr  />
    <div class="row text-center" >
      <div >
        <label>損失方</label><input v-model="RegistInfo_name" type="text" name="RegistInfo_name"/>
      </div>
      <div >
        <label>聯(lián)系人</label><input v-model="RegistInfo_user" type="text" name="RegistInfo_user"/>
      </div>
      <div >
        <label>聯(lián)系方式</label> <input v-model="RegistInfo_phone" name="RegistInfo_phone" type="text"/>
      </div>
    </div>
    <div class="row text-center" >
      <div >
        <label>損失方1</label><input v-model="Prplregist_name" type="text" name="Prplregist_name"/>
      </div>
      <div >
        <label>聯(lián)系人1</label><input v-model="Prplregist_user" type="text" name="Prplregist_user"/>
      </div>
      <div >
        <label>聯(lián)系方式1</label> <input v-model="Prplregist_phone" name="Prplregist_phone" type="text"/>
      </div>
    </div>
    <div class="row text-center" >
      <div >
        <label>查勘估損金額</label> <input v-model="RegistInfo_chakan_money" name="RegistInfo_chakan_money" type="text" value="400.00" /> *
      </div>
      <div >
        <label>施救費金額</label> <input v-model="RegistInfo_rescue_money" name="RegistInfo_rescue_money" type="text" name="" id="" value="0.00" />
      </div>
      <div >
        <label>需要施救</label> <input type="checkbox" />是否需要
      </div>
    </div>
    <div class="row text-center" >
      <div >
        <label>查勘估損金額1</label> <input v-model="Prplregist_chakan_money" name="Prplregist_chakan_money" type="text" value="400.00" /> *
      </div>
      <div >
        <label>施救費金額1</label> <input v-model="Prplregist_rescue_money" name="Prplregist_rescue_money" type="text" name="" id="" value="0.00" />
      </div>
      <div >
        <label>需要施救1</label> <input type="checkbox" />是<input type="checkbox" />沒錯<input type="checkbox" />必須
      </div>
    </div>
    <div class="row text-center" >
      <div >
        <label>查勘地點</label> <input v-model="address" name="address" type="text"  /> *
      </div>
      <div >
        <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" >
      <div >
        <label>施救過程描述</label> <input v-model="RegistInfo_say" name="RegistInfo_say" type="text"  />
      </div>
    </div>
    <div class="row text-center" >
      <div >
        <label>備注</label> <input v-model="remark" name="remark" type="text"  />
      </div>
    </div>
    <div class="row text-center" >
      <div >
        <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" >
      <div >
        <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" >
      <div >
        <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" >
      <div >
        <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" >
      <div >
        <select v-model="RegistInfo_selected" name="RegistInfo_selected">
          <option value="">選擇一個網(wǎng)站</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（實現(xiàn)雙向綁定主要代碼）

//實現(xiàn)取值
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表單數(shù)據(jù)(可以只傳入initDate數(shù)據(jù)源，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>
  #初始化數(shù)據(jù)data
  var initVue = {
    RegistInfo_name : 'legend',
    RegistInfo_user : '龍軍',
    RegistInfo_phone : '1008611',
    RegistInfo_chakan_money : '100',
    RegistInfo_rescue_money : '1000',
    address : '廣東省汕頭市潮南區(qū)',
    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(){
    //調(diào)用自動表單封裝
    var resultVal = new VueFormSub("container-fluid");
    console.log(resultVal);
  }
#注意：input表單中的name屬性必須指定，最好和input表單中的v-model的值一樣
<script>

最終效果：

Vue.js如何實現(xiàn)雙向數(shù)據(jù)綁定方法

感謝各位的閱讀！關(guān)于“Vue.js如何實現(xiàn)雙向數(shù)據(jù)綁定方法”這篇文章就分享到這里了，希望以上內(nèi)容可以對大家有一定的幫助，讓大家可以學(xué)到更多知識，如果覺得文章不錯，可以把它分享出去讓更多的人看到吧！

向AI問一下細(xì)節(jié)

Vue.js如何實現(xiàn)雙向數(shù)據(jù)綁定方法

js的作用是什么

猜你喜歡

最新資訊

相關(guān)推薦

相關(guān)標(biāo)簽