亚洲乱码中文字幕综合,中国熟女仑乱hd,亚洲精品乱拍国产一区二区三区,一本大道卡一卡二卡三乱码全集资源,又粗又黄又硬又爽的免费视频

elementUI select組件value值注意事項詳解

 更新時間:2019年05月29日 10:15:51   作者:飄飄然  
這篇文章主要介紹了elementUI select組件value值注意事項詳解,文中通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友們下面隨著小編來一起學習學習吧

select組件的使用方式就不細說,可查看select組件使用方式

主要要說一下注意事項:

select組件可以動態(tài)生成option選項,option選項綁定對應的文本值和value值。

有時候我們發(fā)現(xiàn) 默認顯示的內(nèi)容會顯示具體的value值而不是對應的文本,這種情況原因都是:

v-model綁定的值與option選項value值類型不符,

常規(guī)就是number與string

通用我們會循環(huán)一個數(shù)組、對象生成option選項

1.簡單數(shù)組

const array1=[1,2,3]

<el-select v-model="seletValue">
  <el-option v-for="item in array1" :key="item" :value="item" :label="item">
  </el-option>
</el-select>

此時 option 的value 是number 類型,v-model綁定的seletValue也必須是number類型

2.對象數(shù)組

const arrayOptions=[{key:0,text:'a'},{key:0,text:'b'},{key:0,text:'c'}}]

<el-select v-model="seletValue">
 <el-option v-for="item in arrayOptions" :key="item.key" :value="item.key" :label="item.text">
 </el-option>
</el-select>

因為我們用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',}

<el-select v-model="seletValue">
 <el-option v-for="(value,key) in options" :key="key" :value="key" :label="item.value">
 </el-option>
</el-select>

因為在json對象的 鍵:值 結構中,鍵的都是string類型,這里我們把json的鍵作為 option的value,

此時 option的value其實是string 類型,v-model綁定的seletValue也必須是string類型 例如 seletValue='1'

如果提交接口的數(shù)據(jù)要求是number怎么辦,只需要在提交數(shù)據(jù)之前轉換下Number(seletValue)就可以了

遇到這種情況可以參照上述情況檢查代碼調(diào)試


以上就是本文的全部內(nèi)容,希望對大家的學習有所幫助,也希望大家多多支持腳本之家。

相關文章

  • vue項目實現(xiàn)圖片上傳功能

    vue項目實現(xiàn)圖片上傳功能

    這篇文章主要為大家詳細介紹了vue項目實現(xiàn)圖片上傳功能,文中示例代碼介紹的非常詳細,具有一定的參考價值,感興趣的小伙伴們可以參考一下
    2019-12-12
  • vue中v-show和v-if的異同及v-show用法

    vue中v-show和v-if的異同及v-show用法

    這篇文章主要介紹了vue中v-show和v-if的異同 ,通過代碼詳解v-show用法,本文給大家介紹的非常詳細具有一定的參考借鑒價值,需要的朋友可以參考下
    2019-06-06
  • vuex入門最詳細整理

    vuex入門最詳細整理

    在本篇文章里小編給大家分享的是關于vuex入門最詳細整理的相關內(nèi)容,需要的朋友們參考下。
    2020-03-03
  • Ant?Design?of?Vue的樹形控件Tree的使用及說明

    Ant?Design?of?Vue的樹形控件Tree的使用及說明

    這篇文章主要介紹了Ant?Design?of?Vue的樹形控件Tree的使用及說明,具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教
    2022-10-10
  • Vue3在Setup中使用axios請求獲取的值方式

    Vue3在Setup中使用axios請求獲取的值方式

    這篇文章主要介紹了Vue3在Setup中使用axios請求獲取的值方式,具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教
    2022-06-06
  • vue3使用vue-cli引入windicss報錯Can‘t resolve windi.css問題

    vue3使用vue-cli引入windicss報錯Can‘t resolve windi.css問題

    這篇文章主要介紹了vue3使用vue-cli引入windicss報錯Can‘t resolve windi.css問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教
    2024-03-03
  • vue實現(xiàn)帶過渡效果的下拉菜單功能

    vue實現(xiàn)帶過渡效果的下拉菜單功能

    這篇文章主要為大家詳細介紹了vue仿寫帶過渡效果的下拉菜單功能,文中示例代碼介紹的非常詳細,具有一定的參考價值,感興趣的小伙伴們可以參考一下
    2020-02-02
  • Vue在頁面右上角實現(xiàn)可懸浮/隱藏的系統(tǒng)菜單

    Vue在頁面右上角實現(xiàn)可懸浮/隱藏的系統(tǒng)菜單

    這篇文章主要介紹了Vue在頁面右上角實現(xiàn)可懸浮/隱藏的系統(tǒng)菜單,實現(xiàn)思路大概是通過props將showCancel這個Boolean值傳遞到子組件,對父子組件分別綁定事件,來控制這個系統(tǒng)菜單的顯示狀態(tài)。需要的朋友可以參考下
    2018-05-05
  • vue實現(xiàn)分頁功能

    vue實現(xiàn)分頁功能

    這篇文章主要為大家詳細介紹了vue實現(xiàn)分頁功能,文中示例代碼介紹的非常詳細,具有一定的參考價值,感興趣的小伙伴們可以參考一下
    2021-08-08
  • 使用vite搭建ssr活動頁架構的實現(xiàn)

    使用vite搭建ssr活動頁架構的實現(xiàn)

    本文主要介紹了使用vite搭建ssr活動頁架構,文中通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友們下面隨著小編來一起學習學習吧
    2022-07-07

最新評論