介绍
这篇文章将为大家详细讲解有关如果在vue中获取输入的输入值,文章内容质量较高,因此小编分享给大家做个参考,希望大家阅读完这篇文章后对相关知识有一定的了解。
<强> vue获取输入输入值的问题解决办法
v代表里有多行输入输入框,vue怎么获取某行的输入的值,随便写了点代码,意思就是后台返回了多行集的列表合,页面显示多行输入框,当修改某行的值时进行校验,输入错误友好提示下,后边加个清空按钮,点击清空当前行数据,最开始的想法,是用v-bind:价值绑定值,这样就出现一种情况,页面输入的值无法获取到,v-bind不会修改原始列表里的值,而且裁判也不能动态绑定,裁判只能全部获取,这个。美元。参考文献itemPriceRef[],这样取的是所有输入框的值,是个数组,可以在提交前进行验证,但是无法判断某一行操作,并且vue操作DOM元素非常非常差,找了N多资料愣是没找到获取值的方法,最后发现用v模型直接绑定列表里的值问题解决了,这样在修改时会直接修改列表里的值,就不存在输入值和原始值不同的问题了,vue在绑定值方面做挺方便的,刚开始学vue,用的不熟练,没想到这种方法,浪费了好多时间,不过也学会了很多东西。
PS:总结了3种方式获取页面输入框的值,1是用v-bind:价值+ ref方式获取,这种只适用有具体的输入框才行,
比如登录页,只有帐号密码输入框,
2是用v模型方式获取,这种是修改原始值列表,所以在提交时,还需要遍历下原来的名单,有点麻烦,
3是用v模型+裁判就是我写的这样,和2的区别是在提交时,直接用ref取值,感觉在未知数量的输入框时更好用
自己随便总结了下,估计在大神看来不值一提,但是对于我一个刚学习vue的人来说,确实浪费了我挺长时间,
花点时间记录下来,加深下印象。
& lt; div v模型=皊kuList", v=?val,键),拷贝skuList “祝辞,
& lt; div>,
& lt; div>,
& lt; span>价格:& lt;/span>,
& lt; span> & lt; input 类型=皌ext", v模型=皏al.price", ref=皃riceRef", v:改变=癱heckPrice (val)“祝辞& lt;/span> & lt; pre name=癱ode",类=癶tml"祝辞& lt;小姐:v:点击=癲ataClearStockPrice (val)“祝辞& lt;/i> & lt;/pre> & lt;/div> & lt; div> & lt; span>上限:& lt;/span> & lt; span> & lt; input 类=皊tockTotal",类型=皌ext", v模型=皏al.stock", ref=皌otalRef" v:改变=癱heckStock (val)“& lt; span 祝辞,祝辞& lt;/span> & lt;/span>,
& lt; pre> & lt;/pre>,
& lt; p> & lt;/p>,
& lt; pre> & lt;/pre>,
& lt; pre name=癱ode",类=癶tml"祝辞& lt; span 祝辞& lt;小姐:v:点击=癲ataClearStockTotal (val)“祝辞& lt;/i>,
& lt;/span> & lt;/div>,
时间/div> & lt;
& lt;/div> & lt;/pre> & lt; pre name=癱ode",类=癶tml"祝辞& lt;/pre> & lt; pre name=癱ode",类=癶tml"在,,,,checkPrice: function (数据),{,
,,,var priceReg =,/^ (? ! 0 + (?: \ 0 +) ? $) (: \ [1 - 9] d * | 0) (?: \ \ d{1,2}) ?/美元;,
,,,如果(! priceReg.test (data.price)) {,
,,,,吐司({信息:,“格式错误“}),,
,,,,data.price =,““,
,,,},
,,,},
,,checkStock: function (数据),{,
,,,var totalReg =,/^[0 - 9] *美元/,,
,,,如果(! totalReg.test (data.stock)) {,
,,,,吐司({信息:,“格式错误“}),,
,,,,data.stock =,““,
,,,},
,,,},
,,(数据){dataClearStockPrice:函数,
,,,data.price =, & # 39; & # 39;,,
,,,},
,,(数据){dataClearStockTotal:函数,
,,,data.stock =, & # 39; & # 39;,,
,,},& lt;/pre> & lt; br 过滤数据=癴iltered"祝辞,
& lt; span ,过滤数据=癴iltered"祝辞& lt;/span>,
& lt; pre name=癱ode",类=癶tml"祝辞& lt;/pre>,
& lt; p> & lt;/p>,
& lt; p> & lt; br 过滤数据=癴iltered"祝辞,
& lt;/p> 关于如果在vue中获取输入的输入值就分享到这里了,希望以上内容可以对大家有一定的帮助,可以学到更多知识。如果觉得文章不错,可以把它分享出去让更多的人看的到。
