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 相关文章推荐
Ajax,UTF-8还是GB2312 eval 还是execScript
Nov 13 Javascript
HTML node相关的一些资料整理
Jan 01 Javascript
js 获取浏览器版本以此来调整CSS的样式
Jun 03 Javascript
JavaScript将一个数组插入到另一个数组的方法
Mar 19 Javascript
jQuery绑定事件on()与弹窗的简要概述
Apr 27 Javascript
jquery.Jcrop结合JAVA后台实现图片裁剪上传实例
Nov 05 Javascript
微信小程序实战之运维小项目
Jan 17 Javascript
Bootstrap Table 删除和批量删除
Sep 22 Javascript
vue.js与element-ui实现菜单树形结构的解决方法
Apr 21 Javascript
vue中的数据绑定原理的实现
Jul 02 Javascript
小程序实现左右来回滚动字幕效果
Dec 28 Javascript
Vue替代marquee标签超出宽度文字横向滚动效果
Dec 09 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传输数据的代码
2007/11/13 PHP
PHP HTML JavaScript MySQL代码如何互相传值的方法分享
2012/09/30 PHP
php多维数组去掉重复值示例分享
2014/03/02 PHP
php微信高级接口群发 多客服
2016/06/23 PHP
浅谈php中urlencode与rawurlencode的区别
2016/09/05 PHP
JavaScript实现Sleep函数的代码
2007/03/04 Javascript
js函数的引用, 关于内存的开销
2012/09/17 Javascript
js中对象的声明方式以及数组的一些用法示例
2013/12/11 Javascript
JS实现选定指定HTML元素对象中指定文本内容功能示例
2017/02/13 Javascript
详解JS中的attribute属性
2017/04/25 Javascript
vue.js实现带日期星期的数字时钟功能示例
2018/08/28 Javascript
微信小程序分享海报生成的实现方法
2018/12/10 Javascript
nodejs 使用http进行post或get请求的实例(携带cookie)
2019/01/03 NodeJs
Vue-router编程式导航的两种实现代码
2021/03/04 Vue.js
[02:45]DOTA2英雄基础教程 伐木机
2013/12/23 DOTA
[49:21]TNC vs VG 2019DOTA2国际邀请赛淘汰赛 胜者组赛BO3 第三场 8.20.mp4
2019/08/22 DOTA
[54:05]DOTA2-DPC中国联赛定级赛 SAG vs iG BO3第一场 1月9日
2021/03/11 DOTA
Python打印scrapy蜘蛛抓取树结构的方法
2015/04/08 Python
浅析Python编写函数装饰器
2016/03/18 Python
Python统计单词出现的次数
2018/04/04 Python
Python中偏函数用法示例
2018/06/07 Python
python3中os.path模块下常用的用法总结【推荐】
2018/09/16 Python
python实现视频读取和转化图片
2019/12/10 Python
pytorch+lstm实现的pos示例
2020/01/14 Python
python中reload重载实例用法
2020/12/15 Python
解决Firefox下不支持outerHTML问题代码分享
2014/06/04 HTML / CSS
为中国消费者甄选天下优品:网易严选
2016/08/11 全球购物
瑜伽国际:Yoga International
2018/04/18 全球购物
一套.net面试题及答案
2016/11/02 面试题
实习推荐信
2014/05/10 职场文书
主题班会演讲稿
2014/05/22 职场文书
学习型党组织心得体会
2014/09/12 职场文书
房屋租赁合同解除协议书
2014/10/11 职场文书
学年个人总结范文
2015/03/05 职场文书
同意报考公务员证明
2015/06/17 职场文书
CSS3通过var()和calc()函数实现动画特效
2021/03/30 HTML / CSS