VUE中對object.object和object[object]的使用解讀
更新時間：2023年06月05日 14:20:27 作者：拉風的小鋒
這篇文章主要介紹了VUE中對object.object和object[object]的使用，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
對object.object和object[object]的使用
發(fā)現(xiàn)
在做項目的過程中偶然發(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'], //每日注冊人數(shù)日期
actualData: [120, 82, 91, 154, 162, 140, 145] //每日注冊人數(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)的對象，那么我們肯定是通過this.lineChartData.newVisitis這樣獲取的。
但是此時我們通過**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中賦值圖片無法顯示src=“[object,Object]”
vue中圖片被編譯成[Object,Object]
在package.lock.json文件中的"url-loader"中添加代碼
總結(jié)
以上為個人經(jīng)驗，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要介紹了vue中router-link標簽所必備了解的屬性，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2019-04-04
這篇文章主要介紹了vue項目依賴升級報錯處理方式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-08-08
Vue3的Composition API是一個全新的API，它允許開發(fā)人員將Vue組件中的邏輯封裝在單獨的功能性組合中，而不是依賴于Vue選項對象。這篇文章將深入探討Vue3的Composition API及其使用方法,需要的朋友可以參考下2023-07-07
使用Vue做前后端分離項目時,通常前端是單獨部署,用戶訪問的也是前端項目地址,因此前端開發(fā)人員很有必要熟悉一下項目部署的流程,下面這篇文章主要給大家介紹了關(guān)于前端Vue項目部署到服務(wù)器的全過程以及踩坑記錄的相關(guān)資料,需要的朋友可以參考下2023-05-05
這篇文章主要給大家介紹了關(guān)于如何利用Vue3+Vite批量導(dǎo)入模塊/資源的相關(guān)資料,文中通過實例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友可以參考下2022-03-03
watch 函數(shù)是 Vue.js 提供的一個強大工具,用于響應(yīng)數(shù)據(jù)變化并執(zhí)行相應(yīng)的回調(diào),通過合理使用 watch 函數(shù),我們可以實現(xiàn)異步數(shù)據(jù)請求、表單驗證、動態(tài)樣式等多種功能,這篇文章主要介紹了Vue.js 的 watch函數(shù),需要的朋友可以參考下2024-08-08
這篇文章主要為大家詳細介紹了vue+springboot實現(xiàn)登錄驗證碼，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-05-05
基于Vue3和element-plus實現(xiàn)登錄功能(最終完整版)
這篇文章主要介紹了基于Vue3和element-plus實現(xiàn)一個完整的登錄功能,本文結(jié)合示例代碼給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值，需要的朋友可以參考下2023-03-03
這篇文章主要介紹了vue動態(tài)繪制四分之三圓環(huán)圖效果，本文通過實例代碼給大家介紹的非常詳細，具有一定的參考借鑒價值,需要的朋友可以參考下2019-09-09
詳解TypeScript+Vue 插件 vue-class-component的使用總結(jié)
這篇文章主要介紹了TypeScript+Vue 插件 vue-class-component的使用總結(jié)，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2019-02-02