首页
所有分类
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 相关文章推荐
JavaScript 权威指南(第四版) 读书笔记
Aug 11 Javascript
javascript 客户端验证上传图片的大小（兼容IE和火狐）
Aug 15 Javascript
jquery异步循环获取功能实现代码
Sep 19 Javascript
Jquery 插件开发笔记整理
Jan 17 Javascript
js简易namespace管理器 实例代码
Jun 21 Javascript
JavaScript字符串对象slice方法入门实例（用于字符串截取）
Oct 16 Javascript
详解AngularJS中的作用域
Jun 17 Javascript
浅析Node.js中的内存泄漏问题
Jun 23 Javascript
JavaScript hasOwnProperty() 函数实例详解
Aug 04 Javascript
webpack file-loader和url-loader的区别
Jan 15 Javascript
node.js使用zlib模块进行数据压缩和解压操作示例
Feb 12 Javascript
通过实例了解Render Props回调地狱解决方案
Nov 04 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
自动化(1) zip(1) enumerate(1) metaclass(1) XML(1) Bean(3) find(1) Geospatial(1) IOC(3) 数据类型(8)
You might like
php 函数中使用static的说明
2012/06/01 PHP
php中的路径问题与set_include_path使用介绍
2014/02/11 PHP
laravel5表单唯一验证的实例代码
2019/09/30 PHP
用JavaScript对JSON进行模式匹配 (Part 2 - 实现)
2010/07/17 Javascript
防止xss和sql注入:JS特殊字符过滤正则
2013/04/18 Javascript
javascript如何动态加载表格与动态添加表格行
2013/11/27 Javascript
轻量级网页遮罩层jQuery插件用法实例
2015/07/31 Javascript
js实现可折叠展开的手风琴菜单效果
2015/09/07 Javascript
Highcharts使用简例及异步动态读取数据
2015/12/30 Javascript
jquery中键盘事件小结
2016/02/24 Javascript
jQuery过滤选择器用法示例
2016/09/12 Javascript
EditPlus 正则表达式 实战(3)
2016/12/15 Javascript
Vue-Router实现页面正在加载特效方法示例
2017/02/12 Javascript
解决Vue 浏览器后退无法触发beforeRouteLeave的问题
2017/12/24 Javascript
浅谈node中的cluster集群
2018/06/02 Javascript
如何用webpack4带你实现一个vue的打包的项目
2018/06/20 Javascript
原生JS实现的轮播图功能详解
2018/08/06 Javascript
vuex页面刷新导致数据丢失的解决方案
2020/12/10 Vue.js
[01:11:28]DOTA2-DPC中国联赛定级赛 RNG vs Phoenix BO3第一场 1月8日
2021/03/11 DOTA
Python中MySQL数据迁移到MongoDB脚本的方法
2016/04/28 Python
Python将图片批量从png格式转换至WebP格式
2020/08/22 Python
Python3编程实现获取阿里云ECS实例及监控的方法
2017/08/18 Python
利用Hyperic调用Python实现进程守护
2018/01/02 Python
Python3爬虫之自动查询天气并实现语音播报
2019/02/21 Python
Flask框架工厂函数用法实例分析
2019/05/25 Python
基于python调用psutil模块过程解析
2019/12/20 Python
浅谈在django中使用filter()(即对QuerySet操作)时踩的坑
2020/03/31 Python
加拿大女鞋品牌：ALDO
2016/11/13 全球购物
英国100％防污和防水的靴子：Muck Boot Company
2020/09/08 全球购物
小学生开学感言
2014/02/28 职场文书
药店促销活动总结
2014/07/10 职场文书
党员教师四风问题对照检查材料
2014/09/26 职场文书
大学生入党自传2015
2015/06/26 职场文书
签字仪式主持词
2015/07/03 职场文书
小学记事作文之200字
2019/08/06 职场文书
MySQL索引 高效获取数据的数据结构
2022/05/02 MySQL