編寫Vue項(xiàng)目,如何給數(shù)組的第一位添加對(duì)象數(shù)據(jù)
Vue給數(shù)組第一位添加對(duì)象數(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ù)組的第一位添加對(duì)象數(shù)據(jù)*/
? ? ? ? this.menuBar.unshift({
? ? ? ? ? title:"全部",
? ? ? ? ? id:13
? ? ? ? })?
? ? ? },給數(shù)組添加新對(duì)象并賦值
方法一
適用于數(shù)組就只有一組
listData: [{name:"張三",age:18}],
//直接添加對(duì)象
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 使用class創(chuàng)建和清除水印的示例代碼
這篇文章主要介紹了vue 使用class創(chuàng)建和清除水印的示例代碼,幫助大家更好的理解和使用vue框架,感興趣的朋友可以了解下2020-12-12
vue el-checkbox實(shí)現(xiàn)全選單選方式
這篇文章主要介紹了vue el-checkbox實(shí)現(xiàn)全選單選方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-03-03
vue實(shí)現(xiàn)點(diǎn)擊展開點(diǎn)擊收起效果
這篇文章主要介紹了vue實(shí)現(xiàn)點(diǎn)擊展開,點(diǎn)擊收起效果,首先我們需要定義data里面的數(shù)據(jù),使用computed對(duì)data進(jìn)行處理,需要的朋友可以參考下2018-04-04
基于vue2.0+vuex的日期選擇組件功能實(shí)現(xiàn)
這篇文章主要介紹了 基于vue2.0+vuex的日期選擇組件功能實(shí)現(xiàn),詳細(xì)介紹了使用vue編寫的日期組件,,非常具有實(shí)用價(jià)值,需要的朋友可以參考下。2017-03-03
Vue項(xiàng)目中如何運(yùn)用vuex的實(shí)戰(zhàn)記錄
如果說是JQuery是手工作坊,那么Vue.js就像是一座工廠,雖然Vue.js做的任何事情JQuery都可以做,但無論是代碼量還是流程規(guī)范性都是前者較優(yōu),下面這篇文章主要給大家介紹了關(guān)于Vue項(xiàng)目中如何運(yùn)用vuex的相關(guān)資料,需要的朋友可以參考下2021-09-09
Vue中computed(計(jì)算屬性)和watch(監(jiān)聽屬性)的用法及區(qū)別說明
這篇文章主要介紹了Vue中computed(計(jì)算屬性)和watch(監(jiān)聽屬性)的用法及區(qū)別說明,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2022-07-07

