重庆分公司,新征程启航
为企业提供网站建设、域名注册、服务器等服务
这篇文章将为大家详细讲解有关如果在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) { 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 = ''; },
关于如果在vue中获取input的输入值就分享到这里了,希望以上内容可以对大家有一定的帮助,可以学到更多知识。如果觉得文章不错,可以把它分享出去让更多的人看到。