vue表單實現輸入框控制輸入小數點後兩位

2021-10-13 07:25:12 字數 1636 閱讀 6420

首先思路要清晰,如何控制只輸入兩位小數

1、我們可以把小數點後面的數字長度用maxlength來控制

2、要做到上一步,可以通過split(』.』)這個方法,以·來將字串分割成陣列

3、拿到陣列的第二個元素,即index為1的元素

4、如果這個元素長度是2,那麼我們就可以把整個字串的長度設定為最大長度,否則將maxlength重置

注意 該方法必須寫在監聽中

接下來直接上**

:label-position

="labelposition"

label

="定價"

prop

="price"

:label-width

="labelwidth"

:required

="rules.price[0].required"

>

:border

="border"

:placeholder

="rules.price[0].message"

v-model

="model.price"

type

="digit"

@input

="keyinput"

:maxlength

="moneymaxleng"

>

u-input

>

u-form-item

>

:label-position

="labelposition"

label

="銷售價"

prop

="saleprice"

:label-width

="labelwidth"

:required

="rules.saleprice[0].required"

>

:border

="border"

:placeholder

="rules.saleprice[0].message"

v-model

="model.saleprice"

type

="digit"

@input

="keyinput"

:maxlength

="moneymaxleng"

>

u-input

>

u-form-item

>

只是我的表單輸入框的**,type="digit" @input="keyinput" :maxlength="moneymaxleng"這幾個屬性是關鍵,@input是對錶單項新增監聽事件,maxlength控制輸入的位數,事件的監聽方法如下

keyinput

(e)else

console.

log(

"numdian"

,numdian);}

console.

log(

'val'

, val)

},

**具體意義自己領會一下,其實很簡單的邏輯,並沒有什麼難度

樣式 輸入框 輸入框和表單設計

輸入框允許使用者在 ui 中輸入文字。它們通常出現在表單和對話方塊中。輸入框元件設計應該為互動提供清晰的啟示,使輸入框在布局中易於發現 高效地填充和可訪問。以下是輸入框的基本元素 容器 可互動輸入區 輸入文字 輸入文字字段 標題 告訴使用者這個輸入框該輸入什麼內容 佔位符文字 為使用者提供輸入文字前...

vue動態增加,刪除表單輸入框

效果如下 參考 後端url disparammodule disparaminit返回的資料結構 一.html distribution set container 麵包屑導航 datapath bread 主體內容 content 等級公升級及所需積分設定 upgrade title h3 num...

vue 實現輸入框邊輸入邊驗證

這個方法是保留整數 inputchange e if o.value.tostring split 0 length 8 else 這個就是最後過來之後的值 this.value o.value 這個方法保留兩位小數 inputchange e obj.value obj.value.replace...