element vue Array數(shù)組和Map對(duì)象的添加與刪除操作
使用場(chǎng)景:
一個(gè)后臺(tái)系統(tǒng)中, 管理員要配置自定義字段后臺(tái)要生成id和title,其他角色要使用自定義字段的表單, 添加數(shù)據(jù), 但是每個(gè)要填寫(xiě)的對(duì)象的id 和title都是無(wú)法固定的,因此頁(yè)面顯示的title 和id都需要自定義數(shù)字和map對(duì)象來(lái)實(shí)現(xiàn),vue 的數(shù)值動(dòng)態(tài)添加內(nèi)容需要特定的方式:
1.定義一個(gè)vue空數(shù)組與一個(gè)vue 空Map對(duì)象:
data: function() {
return{
arrayData:[],//自定義字段中下拉框的數(shù)組
mapData:{},//自定義字段提交保存數(shù)據(jù)的map
dbData:[
{}
],//數(shù)據(jù)庫(kù)查詢(xún)出來(lái)的自定義字段
mapKey:'age',
mapValue:29,
arrayIndex:0,
arrayValue:'中國(guó)',
};
}
2.賦值對(duì)象:
Map 賦值: Vue.set(this.mapData,this.mapkey,this.mapValue);
Array 賦值: Vue.set(this.arrayData,this.arrayIndex,this.arrayValue);
總結(jié)
以上所述是小編給大家介紹的element vue Array數(shù)組和Map對(duì)象的添加與刪除，希望對(duì)大家有所幫助，如果大家有任何疑問(wèn)請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持！
相關(guān)文章
基于Vue 2.0 監(jiān)聽(tīng)文本框內(nèi)容變化及ref的使用說(shuō)明介紹
今天小編就為大家分享一篇基于Vue 2.0 監(jiān)聽(tīng)文本框內(nèi)容變化及ref的使用說(shuō)明介紹，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2018-08-08
將bmob js-sdk放在static目錄，然后在index.html頁(yè)面中已 script 標(biāo)簽的形式引入，就可以在vue中全局使用bmob js-sdk。下面通過(guò)本文給大家分享bmob js-sdk 在vue中的使用教程，需要的朋友參考下吧2018-01-01
vant-list組件觸發(fā)多次onload事件導(dǎo)致數(shù)據(jù)亂序的解決方案
這篇文章主要介紹了vant-list組件觸發(fā)多次onload事件導(dǎo)致數(shù)據(jù)亂序的解決方案2023-01-01
Vue中v-for的數(shù)據(jù)分組實(shí)例
下面小編就為大家分享一篇Vue中v-for的數(shù)據(jù)分組實(shí)例，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2018-03-03
vue中table多選/單選行,獲取其數(shù)據(jù)方式
這篇文章主要介紹了vue中table多選/單選行,獲取其數(shù)據(jù)方式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-07-07
本篇文章主要介紹了解析Vue2.0雙向綁定實(shí)現(xiàn)原理，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-02-02
Vue腳手架配置代理服務(wù)器的兩種方式(小結(jié))
本文主要介紹了Vue腳手架配置代理服務(wù)器的兩種方式(小結(jié))，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2023-01-01
這篇文章主要介紹了vue 表單綁定與組件的相關(guān)資料，幫助大家更好的理解和學(xué)習(xí)使用vue框架，感興趣的朋友可以了解下2021-03-03
Vue CLI3中使用compass normalize的方法
這篇文章主要介紹了Vue CLI3中使用compass normalize的方法，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2019-05-05
前端vue滾動(dòng)條滾動(dòng)監(jiān)聽(tīng)問(wèn)題成功解決辦法
在Vue中監(jiān)聽(tīng)滾動(dòng)事件可以通過(guò)使用指令或者自定義事件來(lái)實(shí)現(xiàn),這篇文章主要給大家介紹了關(guān)于前端vue滾動(dòng)條滾動(dòng)監(jiān)聽(tīng)問(wèn)題成功解決的相關(guān)資料,文中通過(guò)代碼介紹的非常詳細(xì),需要的朋友可以參考下2024-09-09