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

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

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

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

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

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

如下所示：

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

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

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

select option 綁定的 value 是數(shù)字，但是 v-model 為 string ，這就會導(dǎo)致正常的數(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)驗，希望能給大家一個參考，也希望大家多多支持腳本之家。

相關(guān)文章

最新評論