首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 Javascript

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

Posted in Javascript onAugust 27, 2018

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实现双向数据绑定方法(表单自动赋值、表单自动取值)就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持三水点靠木。

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

- Author -

白枫J

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐
ExtJS的FieldSet的column列布局
Nov 20 Javascript
详解Javascript动态操作CSS
Dec 08 Javascript
node.js中的dns.getServers方法使用说明
Dec 08 Javascript
浅谈jquery回调函数callback的使用
Jan 30 Javascript
完美解决jQuery符号$与其他javascript 库、框架冲突的问题
Aug 09 Javascript
ionic实现可滑动的tab选项卡切换效果
Apr 15 Javascript
JavaScript自定义分页样式
Jan 17 Javascript
AngularJs表单校验功能实例代码
Feb 09 Javascript
jQuery plugin animsition使用小结
Sep 14 jQuery
微信小程序如何修改radio和checkbox的默认样式和图标
Jul 24 Javascript
JS实现的定时器展示简单秒表、页面弹框及跳转操作完整示例
Jan 26 Javascript
vue 页面跳转的实现方式
Jan 12 Vue.js
vue实例中data使用return包裹的方法
Aug 27 #Javascript
vue项目打包部署到服务器的方法示例
Aug 27 #Javascript
解决vue中修改了数据但视图无法更新的情况
Aug 27 #Javascript
解决vue接口数据赋值给data没有反应的问题
Aug 27 #Javascript
vue 修改 data 数据问题并实时显示的方法
Aug 27 #Javascript
Node.js连接Sql Server 2008及数据层封装详解
Aug 27 #Javascript
解决vue中修改export default中脚本报一大堆错的问题
Aug 27 #Javascript
ICF-5900W(2) EventBus(1) Spring-Retry(1) TcpServer(1) 多维数组(1) Fragment(1) muduo(1) Spring Boot(5) Sqlite(2) 多线程(6)
You might like
收音机频率指针指示不准确和灵敏度低问题
2021/03/02 无线电
PR值查询 | PageRank 查询
2006/12/20 PHP
PHP 简单数组排序实现代码
2009/08/05 PHP
网页游戏开发入门教程三(简单程序应用)
2009/11/02 PHP
mongodb和php的用法详解
2019/03/25 PHP
JS array 数组详解
2009/03/22 Javascript
Jquery拖拽并简单保存的实现代码
2010/11/28 Javascript
基于JQuery实现的图片自动进行缩放和裁剪处理
2014/01/31 Javascript
JS+CSS实现类似QQ好友及黑名单效果的树型菜单
2015/09/22 Javascript
轻松实现js弹框显示选项
2016/09/13 Javascript
jquery在启动页面时,自动加载数据的实例
2018/01/22 jQuery
AngularJs分页插件使用详解
2018/06/30 Javascript
vue axios封装及API统一管理的方法
2019/04/18 Javascript
封装微信小程序http拦截器过程解析
2019/08/13 Javascript
记录vue做微信自定义分享的一些问题
2019/09/12 Javascript
JS如何定义用字符串拼接的变量
2020/07/11 Javascript
VUE使用axios调用后台API接口的方法
2020/08/03 Javascript
jquery插件懒加载的示例
2020/10/24 jQuery
Python中List.count()方法的使用教程
2015/05/20 Python
对pandas中apply函数的用法详解
2018/04/10 Python
Python动态导入模块的方法实例分析
2018/06/28 Python
Python离线安装PIL 模块的方法
2019/01/08 Python
Python request操作步骤及代码实例
2020/04/13 Python
html5实现完美兼容各大浏览器的播放器
2014/12/26 HTML / CSS
业务主管岗位职责范本
2013/12/25 职场文书
护理专业毕业生自荐信范文
2014/01/05 职场文书
法院信息化建设方案
2014/05/21 职场文书
小学生作文批改评语
2014/12/25 职场文书
实习单位指导教师评语
2014/12/30 职场文书
食堂采购员岗位职责
2015/04/03 职场文书
2015人事行政工作总结范文
2015/05/21 职场文书
2015年幼儿园德育工作总结
2015/05/25 职场文书
2019年共青团工作条例最新版
2019/11/12 职场文书
使用redis实现延迟通知功能(Redis过期键通知)
2021/09/04 Redis
浅谈Node的内存泄露问题
2022/05/06 NodeJs
Spring Boot优化后启动速度快到飞起技巧示例
2022/07/23 Java/Android