首页 > web前端 > js教程 > 正文

vue获取input输入值详解

小云云
发布: 2018-01-15 13:21:02
原创
3660 人浏览过

本文主要介绍了vue获取input输入值的问题解决办法的相关资料,希望通过本文能帮助到大家,让大家掌握这样的问题,需要的朋友可以参考下,希望能帮助到大家。

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的人来说,确实浪费了我挺长时间,

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


<p v-model="skuList" v-for="(val, key) in skuList "> 
<p> 
<p> 
<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>

上限: >

 

 
<span style="font-family:Arial, Helvetica, sans-serif;"><i v-on:click="dataClearStockTotal(val)"></i> 
</span></p> 
</p> 
</p>
    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 = &#39;&#39;; 
   }, 
   dataClearStockTotal:function(data){ 
    data.stock = &#39;&#39;; 
   },

 


登录后复制

相关推荐:

关于jQuery中attr方法和prop方法获取input的checked属性操作方法

jquery获取input type=text中的值的各种方式

PHP获取input输入框中的值去数据库比较显示出来

以上是vue获取input输入值详解的详细内容。更多信息请关注PHP中文网其他相关文章!

相关标签:
来源:php.cn
本站声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责声明 Sitemap
PHP中文网:公益在线PHP培训,帮助PHP学习者快速成长!