如果在vue中获取input的输入值-mile米乐体育

这篇文章将为大家详细讲解有关如果在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的人来说,确实浪费了我挺长时间,

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

 
价格:
上限:>
  
  
checkprice:function(data){ varpricereg=/^(?!0 (?:\.0 )?$)(?:[1-9]\d*|0)(?:\.\d{1,2})?$/; if(!pricereg.test(data.price)){ toast({message:"格式错误"}); data.price=""; } }, checkstock:function(data){ vartotalreg=/^[0-9]*$/; if(!totalreg.test(data.stock)){ toast({message:"格式错误"}); data.stock=""; } }, dataclearstockprice:function(data){ data.price=''; }, dataclearstocktotal:function(data){ data.stock=''; },

关于如果在vue中获取input的输入值就分享到这里了,希望以上内容可以对大家有一定的帮助,可以学到更多知识。如果觉得文章不错,可以把它分享出去让更多的人看到。

展开全文

vue

内容来源于互联网和用户投稿,文章中一旦含有米乐app官网登录的联系方式务必识别真假,本站仅做信息展示不承担任何相关责任,如有侵权或涉及法律问题请联系米乐app官网登录删除

最新文章

网站地图