欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

vue關于select組件綁定的值為數(shù)字類型的問題

 更新時間:2022年09月02日 15:45:16   作者:小劉加油!  
這篇文章主要介紹了vue關于select組件綁定的值為數(shù)字類型的問題,具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教

select組件綁定的值為數(shù)字類型問題

在日常開發(fā)中,我們雙向綁定的form表單,經(jīng)常會遇到對數(shù)字類型的綁定,但對于v-model 綁定的值,輸入數(shù)字會自動轉成字符串類型。

對于input輸入框綁定的值,想要修改為數(shù)字類型很簡單,只需要使用表單的修飾符就可以。

如下所示:

number可以將綁定的 v-model 改為 number類型

<input v-model.number="age" type="number">

但對于 select 選擇框或者 radio 單選框來說,則沒有那么友好了。

select option 綁定的 value 是數(shù)字,但是 v-model 為 string ,這就會導致正常的數(shù)據(jù)無法渲染。解決方法如下所示:

使用 :value

<a-form-item label="登錄方式" name="type">
? ? ? ? ? ? ? ? ? ? <a-radio-group v-model:value="type">
? ? ? ? ? ? ? ? ? ? ? ? <a-radio :value="1">密碼登錄</a-radio>
? ? ? ? ? ? ? ? ? ? ? ? <a-radio :value="2">驗證碼登錄</a-radio>
? ? ? ? ? ? ? ? ? ? </a-radio-group>
</a-form-item>

這樣就可以正常渲染!

若元素屬性需要綁定的值為數(shù)字時的處理

1.如果直接這樣寫

<select ? ?v-model='value'>
?? ?<option ?value='數(shù)字'>...</option>
</select>

這時vue并不會把你寫入的數(shù)字,解析成數(shù)字而是解析成字符串,即使是你寫到data中一個變量為數(shù)字,再使用。都是如此。

2.解決

如果屬性需要是數(shù)字時(type=Number).需要在屬性值前使用v-bind==> ‘:’屬性值 的寫法。

具體寫法如下

<select ? ?v-model='value'>
?? ?<option ?:value='數(shù)字'>...</option>
</select>

以上為個人經(jīng)驗,希望能給大家一個參考,也希望大家多多支持腳本之家。

相關文章

最新評論