首頁 web前端 js教程 vue取得input輸入值詳解

vue取得input輸入值詳解

Jan 15, 2018 pm 01:21 PM
input 詳解 輸入

本文主要介紹了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></pre></p><p><span>上限:</span><span><input class="stockTotal" type="text" v-model="val.stock" ref="totalRef"v-on:change="checkStock(val)"<span style="font-family:Arial,Helvetica,sans-serif"> ></span></span> 
<pre></pre> 
<p></p> 
<pre></pre> 
<pre name="code" class="html"><span style="font-family:Arial, Helvetica, sans-serif;"><i v-on:click="dataClearStockTotal(val)"></i> 
</span></p> 
</p> 
</p></pre><pre name="code" class="html"></pre><pre name="code" class="html">    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 = ''; 
   },</pre><br data-filtered="filtered"> 
<span style="white-space:pre" data-filtered="filtered"></span> 
<pre name="code" class="html"></pre> 
<p></p> 
<p><br data-filtered="filtered"> 
</p>
登入後複製

相關推薦:

關於jQuery中attr方法和prop方法獲取input的checked屬性操作方法

jquery取得input type=text中的值的各種方式

##PHP取得input輸入方塊中的值去資料庫比較顯示出來

以上是vue取得input輸入值詳解的詳細內容。更多資訊請關注PHP中文網其他相關文章!

本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn

熱門文章

倉庫:如何復興隊友
3 週前 By 尊渡假赌尊渡假赌尊渡假赌
Hello Kitty Island冒險:如何獲得巨型種子
3 週前 By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O.能量晶體解釋及其做什麼(黃色晶體)
1 週前 By 尊渡假赌尊渡假赌尊渡假赌

熱門文章

倉庫:如何復興隊友
3 週前 By 尊渡假赌尊渡假赌尊渡假赌
Hello Kitty Island冒險:如何獲得巨型種子
3 週前 By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O.能量晶體解釋及其做什麼(黃色晶體)
1 週前 By 尊渡假赌尊渡假赌尊渡假赌

熱門文章標籤

記事本++7.3.1

記事本++7.3.1

好用且免費的程式碼編輯器

SublimeText3漢化版

SublimeText3漢化版

中文版,非常好用

禪工作室 13.0.1

禪工作室 13.0.1

強大的PHP整合開發環境

Dreamweaver CS6

Dreamweaver CS6

視覺化網頁開發工具

SublimeText3 Mac版

SublimeText3 Mac版

神級程式碼編輯軟體(SublimeText3)

停用Win11輸入體驗指南 停用Win11輸入體驗指南 Dec 27, 2023 am 11:07 AM

停用Win11輸入體驗指南

Windows輸入遇到掛起或記憶體使用率高的問題[修復] Windows輸入遇到掛起或記憶體使用率高的問題[修復] Feb 19, 2024 pm 10:48 PM

Windows輸入遇到掛起或記憶體使用率高的問題[修復]

Win11管理員權限取得詳解 Win11管理員權限取得詳解 Mar 08, 2024 pm 03:06 PM

Win11管理員權限取得詳解

C++中的眾數函數詳解 C++中的眾數函數詳解 Nov 18, 2023 pm 03:08 PM

C++中的眾數函數詳解

C++中的取餘函式詳解 C++中的取餘函式詳解 Nov 18, 2023 pm 02:41 PM

C++中的取餘函式詳解

Oracle SQL中的除法運算詳解 Oracle SQL中的除法運算詳解 Mar 10, 2024 am 09:51 AM

Oracle SQL中的除法運算詳解

PHP模運算子的作用及用法詳解 PHP模運算子的作用及用法詳解 Mar 19, 2024 pm 04:33 PM

PHP模運算子的作用及用法詳解

linux系統呼叫system()函數詳解 linux系統呼叫system()函數詳解 Feb 22, 2024 pm 08:21 PM

linux系統呼叫system()函數詳解

See all articles