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