首页
所有分类
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 相关文章推荐
js实现iframe动态调整高度的代码
Jan 06 Javascript
JS跨域问题详解
Nov 25 Javascript
深入浅析JavaScript中对事件的三种监听方式
Sep 29 Javascript
jquery获取img的src值的简单实例
May 17 Javascript
原生js实现可拖动的登录框效果
Jan 21 Javascript
单行 JS 实现移动端金钱格式的输入规则
May 22 Javascript
seajs中最常用的7个功能、配置示例
Oct 10 Javascript
js中如何完美的解析数据
Mar 18 Javascript
vue-cli 首屏加载优化问题
Nov 06 Javascript
微信小程序HTTP接口请求封装代码实例
Sep 05 Javascript
使用Vant完成DatetimePicker 日期的选择器操作
Nov 12 Javascript
CentOS 8.2服务器上安装最新版Node.js的方法
Dec 16 Javascript
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
jenkins(1) PostMapping(1) 字符串(2) tensorflow(2) Seaborn(1) ResNet50(1) yolo3(1) Inception(2) Xception(1) 逆序(1)
You might like
PHP实现的构造sql语句类实例
2016/02/03 PHP
PHP命名空间namespace用法实例分析
2016/09/27 PHP
PHP JWT初识及其简单示例
2018/10/10 PHP
TP5框架实现自定义分页样式的方法示例
2020/04/05 PHP
Safari5中alert的无限循环BUG
2011/04/07 Javascript
jQuery点击后一组图片左右滑动的实现代码
2012/08/16 Javascript
ExtJS下书写动态生成的xml(兼容火狐)
2013/04/02 Javascript
JS操作图片(增,删,改) 例子
2013/04/17 Javascript
window.location 对象所包含的属性
2014/10/10 Javascript
jQuery中:contains选择器用法实例
2014/12/30 Javascript
JS中Location使用详解
2015/05/12 Javascript
javascript之Boolean类型对象
2016/06/07 Javascript
浅析JavaScriptSerializer类的序列化与反序列化
2016/11/22 Javascript
详解jQuery插件开发方式
2016/11/22 Javascript
bootstrap多种样式进度条展示
2016/12/20 Javascript
原生JS轮播图插件
2017/02/09 Javascript
解决vue打包后vendor.js文件过大问题
2019/07/03 Javascript
vue移动端实现手机左右滑动入场动画
2020/06/17 Javascript
jQuery实现form表单基于ajax无刷新提交方法实例代码
2019/11/04 jQuery
查找Vue中下标的操作(some和findindex)
2020/08/12 Javascript
js+h5 canvas实现图片验证码
2020/10/11 Javascript
python网络编程学习笔记(二)：socket建立网络客户端
2014/06/09 Python
pyqt5自定义信号实例解析
2018/01/31 Python
python实现归并排序算法
2018/11/22 Python
Python3爬虫学习之将爬取的信息保存到本地的方法详解
2018/12/12 Python
使用Django开发简单接口实现文章增删改查
2019/05/09 Python
详解HTML5.2版本带来的修改
2020/05/06 HTML / CSS
DeinDesign德国：设计自己的手机壳
2019/12/14 全球购物
几道PHP的面试题
2012/05/19 面试题
求职推荐信
2013/10/28 职场文书
网页设计个人找工作求职信
2013/11/28 职场文书
2014年学习全国道德模范事迹思想汇报
2014/09/15 职场文书
师德承诺书
2015/01/20 职场文书
工资证明格式模板
2015/06/12 职场文书
mybatis调用sqlserver存储过程返回结果集的方法
2021/05/08 SQL Server
Spring Boot DevTools 全局配置学习指南
2022/03/31 Java/Android