VUE中對(duì)object.object和object[object]的使用解讀
更新時(shí)間：2023年06月05日 14:20:27 作者：拉風(fēng)的小鋒
這篇文章主要介紹了VUE中對(duì)object.object和object[object]的使用，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
對(duì)object.object和object[object]的使用
發(fā)現(xiàn)
在做項(xiàng)目的過程中偶然發(fā)現(xiàn)了使用object[object]和object.object得到的結(jié)果結(jié)果是一樣的，這讓我感覺到很訝異，畢竟以前使用object[object]都是在數(shù)組中使用的，并沒有這樣使用過。
案例
const lineChartData = {
newVisitis: {
expectedData: ['2020-12-1', '2020-12-2', '2020-12-3', '2020-12-4', '2020-12-5', '2020-12-6', '2020-12-7'], //每日注冊(cè)人數(shù)日期
actualData: [120, 82, 91, 154, 162, 140, 145] //每日注冊(cè)人數(shù)
},
messages: {
expectedData: [200, 192, 120, 144, 160, 130, 140],
actualData: [180, 160, 151, 106, 145, 150, 130]
},
purchases: {
expectedData: [80, 100, 121, 104, 105, 90, 100],
actualData: [120, 90, 100, 138, 142, 130, 130]
},
shoppings: {
expectedData: [130, 140, 141, 142, 145, 150, 160],
actualData: [120, 82, 91, 154, 162, 140, 130]
}
}如上，若我們使用newVisitis內(nèi)的對(duì)象，那么我們肯定是通過this.lineChartData.newVisitis這樣獲取的。
但是此時(shí)我們通過**this.lineChartData[newVisitis]**也可以獲取到
代碼如下：
?methods: {
? ? handleSetLineChartData(type) {
? ? ? console.log(type)
? ? ? console.log( lineChartData[type]," lineChartData[purchases]")
? ? ? console.log( lineChartData.purchases," lineChartData.purchases")
? ? ? this.lineChartData = lineChartData[type]
? ? }
? }結(jié)果如下：
vue中賦值圖片無(wú)法顯示src=“[object,Object]”
vue中圖片被編譯成[Object,Object]
在package.lock.json文件中的"url-loader"中添加代碼
總結(jié)
以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
vue使用keep-alive實(shí)現(xiàn)數(shù)據(jù)緩存不刷新
這篇文章主要介紹了vue使用keep-alive實(shí)現(xiàn)數(shù)據(jù)緩存不刷新，這里整理了詳細(xì)的代碼，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-10-10
Vue.js使用axios動(dòng)態(tài)獲取response里的data數(shù)據(jù)操作
這篇文章主要介紹了Vue.js使用axios動(dòng)態(tài)獲取response里的data數(shù)據(jù)操作，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來(lái)看看吧2020-09-09
這篇文章主要介紹了推薦VSCode 上特別好用的 Vue 插件之vetur，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來(lái)看看吧2017-09-09
目前前端最流行的網(wǎng)絡(luò)請(qǐng)求庫(kù)還是axios,所以對(duì)axios的封裝很有必要,下面這篇文章主要給大家介紹了關(guān)于vue3中封裝Axios請(qǐng)求及在組件中使用的相關(guān)資料,文中通過實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2023-04-04
v-for 指令需要使用 item in items 形式的特殊語(yǔ)法，其中 items 是源數(shù)據(jù)數(shù)組，而 item 則是被迭代的數(shù)組元素的別名。今天通過本文給大家介紹Vue中v-for更新檢測(cè)的操作方法，感興趣的朋友一起看看吧2021-10-10
Vue.set()實(shí)現(xiàn)數(shù)據(jù)動(dòng)態(tài)響應(yīng)的方法
這篇文章主要介紹了Vue.set()實(shí)現(xiàn)數(shù)據(jù)動(dòng)態(tài)響應(yīng)的相關(guān)知識(shí)，非常不錯(cuò)，具有參考借鑒價(jià)值,需要的朋友可以參考下2018-02-02
雙向數(shù)據(jù)綁定原理主要運(yùn)用了發(fā)布訂閱模式來(lái)實(shí)現(xiàn)的，通過Object.defineProperty對(duì)數(shù)據(jù)劫持，觸發(fā)getter，setter方法，這篇文章主要介紹了vue2.x雙向數(shù)據(jù)綁定原理,需要的朋友可以參考下2023-02-02
本文主要介紹了element前端實(shí)現(xiàn)壓縮圖片的功能，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2023-03-03
Vue超出文本框顯示省略號(hào)鼠標(biāo)滑入顯示全部的實(shí)現(xiàn)方法
在Vue項(xiàng)目中經(jīng)常需要處理文本內(nèi)容過長(zhǎng)的情況,這篇文章主要給大家介紹了關(guān)于Vue超出文本框顯示省略號(hào)鼠標(biāo)滑入顯示全部的實(shí)現(xiàn)方法,文中通過代碼介紹的非常詳細(xì),需要的朋友可以參考下2023-10-10
這篇文章主要分享vuex中mapState思想及應(yīng)用，在需求開發(fā)過程中，有的接口返回的結(jié)果中有很多字段需要展示到頁(yè)面上。通?？梢詫⑦@些字段在.vue文件中封裝為計(jì)算屬性，或者重新將對(duì)應(yīng)字段賦值到 data 中的字段來(lái)達(dá)到便于使用的目的，具體內(nèi)容，我們一起來(lái)看下面文章內(nèi)容吧2021-10-10