摘要:組件的使用方式就不細說,可查看組件使用方式主要要說一下注意事項組件可以動態生成選項,選項綁定對應的文本值和值。
select組件的使用方式就不細說,可查看select組件使用方式
主要要說一下注意事項:
select組件可以動態生成option選項,option選項綁定對應的文本值和value值。
有時候我們發現 默認顯示的內容會顯示具體的value值而不是對應的文本,這種情況原因都是:
v-model綁定的值與option選項value值類型不符,
常規就是number與string
通用我們會循環一個數組、對象生成option選項
1.簡單數組
const array1=[1,2,3]
此時 option 的value 是number 類型,v-model綁定的seletValue也必須是number類型
2.對象數組
const arrayOptions=[{key:0,text:"a"},{key:0,text:"b"},{key:0,text:"c"}}]
因為我們用item.key作為option的value,item.key 是json中的值,
此時 option的value是number類型,v-model綁定的seletValue也必須是number類型 例如 seletValue=1
3.對象
const options={0:"a",1:"b",2:"c",}
因為在json對象的 鍵:值 結構中,鍵的都是string類型,這里我們把json的鍵作為 option的value,
此時 option的value其實是string 類型,v-model綁定的seletValue也必須是string類型 例如 seletValue="1"
如果提交接口的數據要求是number怎么辦,只需要在提交數據之前轉換下Number(seletValue)就可以了
遇到這種情況可以參照上述情況檢查代碼調試
文章版權歸作者所有,未經允許請勿轉載,若此文章存在違規行為,您可以聯系管理員刪除。
轉載請注明本文地址:http://specialneedsforspecialkids.com/yun/96229.html
摘要:基于這種思路,那留給我們的只有兩步,組件設計和數據設計。關于組件的相關邏輯,可能要在文章里面一次性說清楚,還是需要費很大的精力,不過希望數據驅動的思想能夠讓之前沒有體會到這種開發樂趣的小伙伴們有到新的想法。 在日常開發中,我們肯定不止一次碰到重復的業務代碼,明明功能相似,但總沒思路去把它封裝成組件。關于封裝組件,希望這篇文章能帶給大家新的思路,去更高效的完成日常開發。(注:例子都是基于...
摘要:這是一段內容標題名稱確定點擊確定后的回調函數確認消息彈框提示用戶確認其已經觸發的動作,并詢問是否進行此操作時會用到此對話框。。 初始化一個Vue項目 F:Test>vue init webpack Test1 ? Project name test1 ? Project description A Vue.js project ? Author Selience ? Vue buil...
摘要:這是一段內容標題名稱確定點擊確定后的回調函數確認消息彈框提示用戶確認其已經觸發的動作,并詢問是否進行此操作時會用到此對話框。。 初始化一個Vue項目 F:Test>vue init webpack Test1 ? Project name test1 ? Project description A Vue.js project ? Author Selience ? Vue buil...
摘要:這是一段內容標題名稱確定點擊確定后的回調函數確認消息彈框提示用戶確認其已經觸發的動作,并詢問是否進行此操作時會用到此對話框。。 初始化一個Vue項目 F:Test>vue init webpack Test1 ? Project name test1 ? Project description A Vue.js project ? Author Selience ? Vue buil...
閱讀 3198·2023-04-26 01:30
閱讀 665·2021-11-08 13:15
閱讀 1774·2021-09-24 10:35
閱讀 999·2021-09-22 15:41
閱讀 1930·2019-08-30 15:44
閱讀 593·2019-08-30 13:22
閱讀 1005·2019-08-30 13:06
閱讀 1197·2019-08-29 13:22