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)文章
Vue.config.productionTip?=?false?不起作用的問題及解決
這篇文章主要介紹了Vue.config.productionTip?=?false為什么不起作用,本文給大家分析問題原因解析及解決方案,需要的朋友可以參考下2022-11-11webstrom Debug 調(diào)試vue項目的方法步驟
這篇文章主要介紹了webstrom Debug 調(diào)試vue項目的方法步驟,詳細(xì)的介紹了兩種調(diào)試vue項目的方法,小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2018-07-07Node.js使用orm2進(jìn)行update操作時關(guān)聯(lián)字段無法修改的解決方法
這篇文章主要給大家介紹了Node.js使用orm2進(jìn)行update操作時關(guān)聯(lián)字段無法修改的解決方法,文中給出了詳細(xì)的示例代碼供大家參考學(xué)習(xí),對大家具有一定的參考學(xué)習(xí)價值,需要的朋友們下面來一起看看吧。2017-06-06vue中el-table格式化el-table-column內(nèi)容的三種方法
本文主要介紹了vue中el-table格式化el-table-column內(nèi)容的三種方法,文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2022-08-08Vuex結(jié)合storage實現(xiàn)用戶信息本地存儲方式
這篇文章主要介紹了Vuex結(jié)合storage實現(xiàn)用戶信息本地存儲方式,具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教2022-04-04初學(xué)vue出現(xiàn)空格警告的原因及其解決方案
今天小編就為大家分享一篇初學(xué)vue出現(xiàn)空格警告的原因及其解決方案,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧2019-10-10Slots Emit和Props穿透組件封裝實現(xiàn)摸魚加鐘
這篇文章主要為大家介紹了Slots Emit和Props穿透組件封裝實現(xiàn)示例詳解,為摸魚加個鐘,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2022-08-08vue 使用vant插件做tabs切換和無限加載功能的實現(xiàn)
這篇文章主要介紹了vue 使用vant插件做tabs切換和無限加載功能的實現(xiàn),具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧2020-11-11