首页
所有分类
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 相关文章推荐
jQuery在vs2008及js文件中的无智能提示的解决方法
Dec 30 Javascript
javascript禁用Tab键脚本实例
Nov 22 Javascript
js动态创建标签示例代码
Jun 09 Javascript
三种取消选中单选框radio的方法
Sep 09 Javascript
详解webpack+es6+angular1.x项目构建
May 02 Javascript
JS实现队列的先进先出功能示例
May 10 Javascript
jQuery选择器之属性筛选选择器用法详解
Sep 19 jQuery
vue axios 给生产环境和发布环境配置不同的接口地址(推荐)
May 08 Javascript
electron-vue开发环境内存泄漏问题汇总
Oct 10 Javascript
JS页面获取 session 值，作用域和闭包学习笔记
Oct 16 Javascript
Vue项目中使用flow做类型检测的方法
Mar 18 Javascript
vue中实现图片压缩 file文件的方法
May 28 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
肯尼亚购物网站(2) 阿根廷购物网站(9) 挪威购物网站(7) 荷兰购物网站(99) 丹麦购物网站(22) 南非购物网站(8) 瑞典购物网站(55) 比利时购物网站(33) 芬兰购物网站(10) 意大利购物网站(128)
You might like
php SQL防注入代码集合
2008/04/25 PHP
php使用Cookie实现和用户会话的方法
2015/01/21 PHP
基于php的CMS中展示文章类实例分析
2015/06/18 PHP
php 使用curl模拟登录人人(校内)网的简单实例
2016/06/06 PHP
yii2 modal弹窗之ActiveForm ajax表单异步验证
2016/06/13 PHP
关于PHP转换超过2038年日期出错的问题解决
2017/06/28 PHP
php生成短网址/短链接原理和用法实例分析
2020/05/29 PHP
JS 常用校验函数
2009/03/26 Javascript
jQuery 使用手册(七)
2009/09/23 Javascript
Jquery AutoComplete自动完成 的使用方法实例
2010/03/19 Javascript
各浏览器对link标签onload/onreadystatechange事件支持的差异分析
2011/04/27 Javascript
为EasyUI的Tab标签添加右键菜单的方法
2012/07/14 Javascript
javascript 密码框防止用户粘贴和复制的实现代码
2014/02/17 Javascript
超赞的jQuery图片滑块动画特效代码汇总
2016/01/25 Javascript
jQuery获取父元素节点、子元素节点及兄弟元素节点的方法
2016/04/14 Javascript
如何判断Javascript对象是否存在的简单实例
2016/05/18 Javascript
深入理解(function(){... })();
2016/08/16 Javascript
BootStrap树状图显示功能
2016/11/24 Javascript
Vue+ElementUI使用vue-pdf实现预览功能
2019/11/26 Javascript
electron 如何将任意资源打包的方法步骤
2020/04/16 Javascript
python避免死锁方法实例分析
2015/06/04 Python
Python极简代码实现杨辉三角示例代码
2016/11/15 Python
Python 模块EasyGui详细介绍
2017/02/19 Python
Python使用正则表达式抓取网页图片的方法示例
2017/04/21 Python
解决python爬虫中有中文的url问题
2018/05/11 Python
基于Django signals 信号作用及用法详解
2020/03/28 Python
PyQt5 QDockWidget控件应用详解
2020/08/12 Python
想学画画？python满足你！
2020/12/24 Python
HTML5中使用json对象的实例代码
2018/09/10 HTML / CSS
凌阳科技股份有限公司C++程序员面试题笔试题
2014/11/20 面试题
老总助理工作岗位职责
2014/02/06 职场文书
2015公务员年度考核评语
2015/03/25 职场文书
机器人瓦力观后感
2015/06/12 职场文书
辞职报告（范文三篇）
2019/08/27 职场文书
Django使用channels + websocket打造在线聊天室
2021/05/20 Python
一文了解MySQL二级索引的查询过程
2022/02/24 MySQL