vue關(guān)于select組件綁定的值為數(shù)字類型的問題
更新時(shí)間：2022年09月02日 15:45:16 作者：小劉加油！
這篇文章主要介紹了vue關(guān)于select組件綁定的值為數(shù)字類型的問題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
select組件綁定的值為數(shù)字類型問題
在日常開發(fā)中，我們雙向綁定的form表單，經(jīng)常會(huì)遇到對(duì)數(shù)字類型的綁定，但對(duì)于v-model 綁定的值，輸入數(shù)字會(huì)自動(dòng)轉(zhuǎn)成字符串類型。
對(duì)于input輸入框綁定的值，想要修改為數(shù)字類型很簡(jiǎn)單，只需要使用表單的修飾符就可以。
如下所示：
number可以將綁定的 v-model 改為 number類型
<input v-model.number="age" type="number">
但對(duì)于 select 選擇框或者 radio 單選框來說，則沒有那么友好了。
select option 綁定的 value 是數(shù)字，但是 v-model 為 string ，這就會(huì)導(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">驗(yàn)證碼登錄</a-radio> ? ? ? ? ? ? ? ? ? ? </a-radio-group> </a-form-item>
這樣就可以正常渲染！
若元素屬性需要綁定的值為數(shù)字時(shí)的處理
1.如果直接這樣寫
<select ? ?v-model='value'> ?? ?<option ?value='數(shù)字'>...</option> </select>
這時(shí)vue并不會(huì)把你寫入的數(shù)字，解析成數(shù)字而是解析成字符串，即使是你寫到data中一個(gè)變量為數(shù)字，再使用。都是如此。
2.解決
如果屬性需要是數(shù)字時(shí)(type=Number).需要在屬性值前使用v-bind==> ‘:’屬性值 的寫法。
具體寫法如下
<select ? ?v-model='value'> ?? ?<option ?：value='數(shù)字'>...</option> </select>
以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
vue-cli+axios實(shí)現(xiàn)文件上傳下載功能(下載接收后臺(tái)返回文件流)
這篇文章主要介紹了vue-cli+axios實(shí)現(xiàn)文件上傳下載功能(下載接收后臺(tái)返回文件流),本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2019-05-05
這篇文章主要給大家介紹了關(guān)于uniapp中app與webview通訊的相關(guān)資料,這里的通信主要是打包APP端和web-view內(nèi)嵌網(wǎng)頁(yè)的雙向通信,文中通過代碼介紹的非常詳細(xì),需要的朋友可以參考下2024-03-03
頁(yè)面跳轉(zhuǎn)有很多方法,本次使用的是?vue-router,但卻在使用?router.push?的時(shí)候遇到了點(diǎn)麻煩,所以記錄下來,希望可以幫助有需要的人2023-09-09
vsCode中vue文件無法提示html標(biāo)簽的操作方法
在vsCode中書寫Vue頁(yè)面時(shí)無法提示,那真是很郁悶的事情,下面這篇文章主要給大家介紹了關(guān)于vsCode中vue文件無法提示html標(biāo)簽的操作方法,需要的朋友可以參考下2023-03-03
vue本地打開build后生成的dist文件夾index.html問題
這篇文章主要介紹了vue本地打開build后生成的dist文件夾index.html問題，本文給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值，需要的朋友參考下吧2019-09-09
這篇文章主要為大家詳細(xì)介紹了vue日期組件,支持vue1.0和2.0，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-01-01
vue3項(xiàng)目vite.config.js配置代理、端口、打包名以及圖片壓縮
這篇文章主要給大家介紹了關(guān)于vue3項(xiàng)目vite.config.js配置代理、端口、打包名以及圖片壓縮的相關(guān)資料,因?yàn)?.0版本中vue已經(jīng)內(nèi)置了很多關(guān)于webpack的配置,一般情況下開箱即用,需要修改則可以在vue.config.js文件中完成,需要的朋友可以參考下2023-12-12
這篇文章主要介紹了mpvue+vant app搭建微信小程序的方法步驟，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2019-02-02
這篇文章主要介紹了VueJs組件之父子通訊的方式，非常不錯(cuò)，具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2018-05-05
快速解決Vue項(xiàng)目在IE瀏覽器中顯示空白的問題
今天小編就為大家分享一篇快速解決Vue項(xiàng)目在IE瀏覽器中顯示空白的問題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2018-09-09