快捷導(dǎo)航

編寫Vue項(xiàng)目,如何給數(shù)組的第一位添加對象數(shù)據(jù)

更新時(shí)間：2022年04月21日 10:37:47 作者：郭寶

這篇文章主要介紹了編寫Vue項(xiàng)目,如何給數(shù)組的第一位添加對象數(shù)據(jù)，具有很好的參考價(jià)值，希望對大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教

Vue給數(shù)組第一位添加對象數(shù)據(jù)

核心代碼如下：

? ? ?this.menuBar.unshift({
? ? ? ? ? title:"全部",
? ? ? ? ? id:13
? ? ? ? })

全部代碼如下：

? ? data(){
? ? ? ? return {?
? ? ? ? ? menuBar:[
? ? ? ? ? ? {
? ? ? ? ? ? ? title:"家具生活",
? ? ? ? ? ? ? id:14
? ? ? ? ? ? },
? ? ? ? ? ? {
? ? ? ? ? ? ? title:"攝影設(shè)計(jì)",
? ? ? ? ? ? ? id:15
? ? ? ? ? ? },
? ? ? ? ? ? {
? ? ? ? ? ? ? title:"明星美女",
? ? ? ? ? ? ? id:16
? ? ? ? ? ? },
? ? ? ? ? ? {
? ? ? ? ? ? ? title:"空間設(shè)計(jì)",
? ? ? ? ? ? ? id:17
? ? ? ? ? ? },
? ? ? ? ? ? {
? ? ? ? ? ? ? title:"戶型裝飾",
? ? ? ? ? ? ? id:18
? ? ? ? ? ? },
? ? ? ? ? ? {
? ? ? ? ? ? ? title:"廣告攝影",
? ? ? ? ? ? ? id:19
? ? ? ? ? ? },
? ? ? ? ? ? {
? ? ? ? ? ? ? title:"攝影學(xué)習(xí)",
? ? ? ? ? ? ? id:20
? ? ? ? ? ? },
? ? ? ? ? ? {
? ? ? ? ? ? ? title:"攝影器材",
? ? ? ? ? ? ? id:21
? ? ? ? ? ? },
? ? ? ? ? ? {
? ? ? ? ? ? ? title:"明星寫真",
? ? ? ? ? ? ? id:22
? ? ? ? ? ? },
? ? ? ? ? ? {
? ? ? ? ? ? ? title:"青春甜美",
? ? ? ? ? ? ? id:23
? ? ? ? ? ? },
? ? ? ? ? ? {
? ? ? ? ? ? ? title:"古典美女",
? ? ? ? ? ? ? id:24
? ? ? ? ? ? },
? ? ? ? ? ],
?
? ? ? ? }
? ? ? },
? ? ? created(){?
?
? ? ? ? /*在數(shù)組的第一位添加對象數(shù)據(jù)*/
? ? ? ? this.menuBar.unshift({
? ? ? ? ? title:"全部",
? ? ? ? ? id:13
? ? ? ? })?
? ? ? },

給數(shù)組添加新對象并賦值

方法一

適用于數(shù)組就只有一組

listData: [{name:"張三",age:18}],
//直接添加對象
listData.sex="男"

方法二

適用于數(shù)組中有多組信息

listData:[],
list:[{"張三","李四"}]
//比如想把另外一個(gè)數(shù)組中編列出來的值加入到這個(gè)數(shù)組中
? ?for (let index = 0; index < this.listlist.length; index++) {
? ? ? ? ? this.listData.push({ name: "" });
? ? ? ? ? this.listData[index].name= this.list[index];
? ? ? ? }

以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。

您可能感興趣的文章:

相關(guān)文章

Vue實(shí)現(xiàn)炫酷的代碼瀑布流背景
這篇文章主要為大家詳細(xì)介紹了Vue實(shí)現(xiàn)炫酷的代碼瀑布流背景，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2022-08-08
Vue2.0 從零開始_環(huán)境搭建操作步驟
下面小編就為大家?guī)硪黄猇ue2.0 從零開始_環(huán)境搭建操作步驟。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧
2017-06-06
vue前端項(xiàng)目打包成Docker鏡像并運(yùn)行的實(shí)現(xiàn)
這篇文章主要介紹了vue前端項(xiàng)目打包成Docker鏡像并運(yùn)行的實(shí)現(xiàn)方式，具有很好的參考價(jià)值，希望對大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
2022-08-08
Vue3?TypeScript?實(shí)現(xiàn)useRequest詳情
本文介紹了Vue3?TypeScript實(shí)現(xiàn)useRequest詳情，useRequest可能是目前社區(qū)中最強(qiáng)大，最接地氣的請求類?Hooks了?？梢愿采w99%的網(wǎng)絡(luò)請求場景，無論是讀還是寫，無論是普通請求還是分頁請求，無論是緩存還是防抖節(jié)流，通通都能支持，關(guān)于其介紹需要的小伙伴可以參考一下
2022-05-05
使用Vue制作圖片輪播組件思路詳解
這篇文章主要介紹了使用Vue制作圖片輪播組件思路詳解,需要的朋友可以參考下
2018-03-03
vue單頁緩存方案分析及實(shí)現(xiàn)
這篇文章主要介紹了vue單頁緩存方案分析及實(shí)現(xiàn)，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧
2018-09-09
vue3整合SpringSecurity加JWT實(shí)現(xiàn)登錄認(rèn)證
本文主要介紹了vue3整合SpringSecurity加JWT實(shí)現(xiàn)登錄認(rèn)證,文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
2025-04-04
Vue3中SetUp函數(shù)的參數(shù)props、context詳解
我們知道setup函數(shù)是組合API的核心入口函數(shù),下面這篇文章主要給大家介紹了關(guān)于Vue3中SetUp函數(shù)的參數(shù)props、context的相關(guān)資料,需要的朋友可以參考下
2021-07-07
使用vue指令解決文本的溢出提示的問題
在我們項(xiàng)目開發(fā)中,經(jīng)常會(huì)有超長文本溢出提示,未溢出則不提示的場景,接下來我們將一步步用vue指令實(shí)現(xiàn)這個(gè)需求,文中有詳細(xì)的代碼講解,感興趣的朋友跟著小編一起來看看吧
2023-08-08
基于Vue3實(shí)現(xiàn)組件封裝的技巧分享
這篇文章主要介紹了基于Vue3實(shí)現(xiàn)組件封裝的技巧,本文在Vue3的基礎(chǔ)上針對一些常見UI組件庫組件進(jìn)行二次封裝,旨在追求更好的個(gè)性化,更靈活的拓展,感興趣的小伙伴跟著小編一起來看看吧
2024-09-09