vue获取input输入值的问题解决办法


Posted in Javascript onOctober 17, 2017

vue获取input输入值的问题解决办法

v-for里有多行input输入框,vue怎么获取某行的输入的值,随便写了点代码,意思就是后台返回了多行的list集合,页面显示多行输入框,当修改某行的值时进行校验,输入错误友好提示下,后边加个清空按钮,点击清空当前行数据,最开始的想法是,用v-bind:value绑定值,这样就出现一种情况,页面输入的值无法获取到,v-bind不会修改原始list里的值,而且ref也不能动态绑定,ref只能全部获取,this.$refs.itemPriceRef[],这样取的是所有输入框的值,是个数组,可以在提交前进行验证,但是无法判断某一行操作,并且vue操作DOM元素非常非常差,找了N多资料愣是没找到获取值的方法,最后发现用v-model直接绑定list里的值问题解决了,这样在修改时会直接修改list里的值,就不存在输入值和原始值不同的问题了,VUE在绑定值方面做挺方便的,刚开始学vue,用的不熟练,没想到这种方法,浪费了好多时间,不过也学会了很多东西。

PS:总结了3种方式获取页面输入框的值,1是用v-bind:value + ref方式获取,这种只适用有具体的输入框才行,

比如登录页,只有帐号密码输入框,

2是用v-model方式获取,这种是修改原始list值,所以在提交时,还需要遍历下原来的list,有点麻烦,

3是用v-model + ref 就是我写的这样,和2的区别是在提交时,直接用ref取值,感觉在未知数量的输入框时更好用

自己随便总结了下,估计在大神看来不值一提,但是对于我一个刚学习vue的人来说,确实浪费了我挺长时间,

花点时间记录下来,加深下印象。

<div v-model="skuList" v-for="(val, key) in skuList "> 
<div> 
<div> 
<span>价格:</span> 
<span><input type="text" v-model="val.price" ref="priceRef" v-on:change="checkPrice(val)"></span>
<pre name="code" class="html"><i v-on:click="dataClearStockPrice(val)"></i></pre></div><div><span>上限:</span><span><input class="stockTotal" type="text" v-model="val.stock" ref="totalRef"v-on:change="checkStock(val)"<span style="font-family:Arial,Helvetica,sans-serif"> ></span></span> 
<pre></pre> 
<p></p> 
<pre></pre> 
<pre name="code" class="html"><span style="font-family:Arial, Helvetica, sans-serif;"><i v-on:click="dataClearStockTotal(val)"></i> 
</span></div> 
</div> 
</div></pre><pre name="code" class="html"></pre><pre name="code" class="html">    checkPrice:function (data) { 
    var priceReg = /^(?!0+(?:\.0+)?$)(?:[1-9]\d*|0)(?:\.\d{1,2})?$/; 
    if(!priceReg.test(data.price)){ 
     Toast({message: "格式错误"}); 
     data.price = ""; 
    } 
   }, 
   checkStock:function (data) { 
    var totalReg = /^[0-9]*$/; 
    if(!totalReg.test(data.stock)){ 
     Toast({message: "格式错误"}); 
     data.stock = ""; 
    } 
   }, 
   dataClearStockPrice:function(data){ 
    data.price = ''; 
   }, 
   dataClearStockTotal:function(data){ 
    data.stock = ''; 
   },</pre><br data-filtered="filtered"> 
<span style="white-space:pre" data-filtered="filtered"></span> 
<pre name="code" class="html"></pre> 
<p></p> 
<p><br data-filtered="filtered"> 
</p>

如有疑问请留言或者到本站社区交流讨论,感谢阅读,希望能帮助到大家,谢谢大家对本站的支持!

Javascript 相关文章推荐
PJ Blog修改-禁止复制的代码和方法
Oct 25 Javascript
jQuery 1.5 源码解读 面向中高阶JSER
Apr 05 Javascript
javascript权威指南 学习笔记之javascript数据类型
Sep 24 Javascript
关于event.cancelBubble和event.stopPropagation()的区别介绍
Dec 11 Javascript
JavaScript利用正则表达式去除日期中的“-”
Jul 01 Javascript
js实现不提交表单获取单选按钮值的方法
Aug 21 Javascript
PHP获取当前页面完整URL的方法
Dec 02 Javascript
jQuery使用bind函数实现绑定多个事件的方法
Oct 11 jQuery
使用 Node.js 模拟滑动拼图验证码操作的示例代码
Nov 02 Javascript
CentOS环境中MySQL修改root密码方法
Jan 07 Javascript
vue实现全匹配搜索列表内容
Sep 26 Javascript
koa2的中间件功能及应用示例
Mar 05 Javascript
node.js 用socket实现聊天的示例代码
Oct 17 #Javascript
Bootstrap图片轮播效果详解
Oct 17 #Javascript
vue组件之Alert的实现代码
Oct 17 #Javascript
JS实现按钮添加背景音乐示例代码
Oct 17 #Javascript
vue-cli之router基本使用方法详解
Oct 17 #Javascript
教你用Cordova打包Vue项目的方法
Oct 17 #Javascript
vue与TypeScript集成配置最简教程(推荐)
Oct 17 #Javascript
You might like
php中Session的生成机制、回收机制和存储机制探究
2014/08/19 PHP
php函数与传递参数实例分析
2014/11/15 PHP
PHP中的traits实现代码复用使用实例
2015/05/13 PHP
php图片添加水印例子
2016/07/20 PHP
yii2中dropDownList实现二级和三级联动写法
2017/04/26 PHP
PHP编程实现微信企业向用户付款的方法示例
2017/07/26 PHP
网页常用特效代码整理
2006/06/23 Javascript
用js实现上传图片前的预览(TX的面试题)
2007/08/14 Javascript
jquery动画3.创建一个带遮罩效果的图片走廊
2012/08/24 Javascript
E3 tree 1.6在Firefox下显示问题的修复方法
2013/01/30 Javascript
通过上下左右键和回车键切换光标实现代码
2013/03/08 Javascript
自己动手手写jQuery插件总结
2015/01/20 Javascript
AngularJS转换响应内容
2016/01/27 Javascript
js仿QQ中对联系人向左滑动、滑出删除按钮的操作
2016/04/07 Javascript
解决bootstrap导航栏navbar在IE8上存在缺陷的方法
2016/07/01 Javascript
JavaScript中绑定事件的三种方式及去除绑定
2016/11/05 Javascript
jQuery/JS监听input输入框值变化实例
2019/10/17 jQuery
react 原生实现头像滚动播放的示例
2020/04/21 Javascript
[01:31:22]DOTA2-DPC中国联赛定级赛 LBZS vs Magma BO3第二场 1月10日
2021/03/11 DOTA
python每隔N秒运行指定函数的方法
2015/03/16 Python
详解python中的 is 操作符
2017/12/26 Python
Python中使用支持向量机SVM实践
2017/12/27 Python
对python遍历文件夹中的所有jpg文件的实例详解
2018/12/08 Python
Python零基础入门学习之输入与输出
2019/04/03 Python
Python自动发送和收取邮件的方法
2020/08/12 Python
澳大利亚宠物商店:Petbarn
2017/11/18 全球购物
德国运动营养和健身网上商店:Myprotein.de
2018/07/18 全球购物
大学生村官心得体会范文
2014/01/04 职场文书
办理居住证介绍信
2014/01/15 职场文书
2015年入党决心书
2015/02/05 职场文书
幼儿园百日安全活动总结
2015/05/07 职场文书
九年级数学教学反思
2016/02/17 职场文书
《女娲补天》教学反思
2016/02/20 职场文书
python 下划线的多种应用场景总结
2021/05/12 Python
教你用Java Swing实现自助取款机系统
2021/06/11 Java/Android
如何理解python接口自动化之logging日志模块
2021/06/15 Python