本文主要介紹了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 = '';
},
dataClearStockTotal:function(data){
data.stock = '';
},
相關推薦：
關於jQuery中attr方法和prop方法獲取input的checked屬性操作方法
jquery取得input type=text中的值的各種方式
以上是vue取得input輸入值詳解的詳細內容。更多資訊請關注PHP中文網其他相關文章！
