欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

JSON數(shù)組和JSON對象在vue中的獲取方法

 更新時間:2022年09月21日 10:11:11   作者:瀟I灑  
這兩天在學(xué)習(xí)vue,主要是為了實現(xiàn)前后端的分離,因此數(shù)據(jù)的傳輸是必不可少的一個環(huán)節(jié),這篇文章主要介紹了JSON數(shù)組和JSON對象在vue中的獲取方法,需要的朋友可以參考下

這兩天在學(xué)習(xí)vue,主要是為了實現(xiàn)前后端的分離,因此數(shù)據(jù)的傳輸是必不可少的一個環(huán)節(jié)。

為了快速入門,參考了vue官網(wǎng)的視頻,這個過程由于引入vue.js的問題走了一些彎路,這個我們以后再來探討,因為現(xiàn)在主要講的是JSON數(shù)組和JSON對象。

在這個截圖中(截了好幾次才完美截下),紅框部分是從API獲取數(shù)據(jù),中間的語法等我們也在以后再討論。

我發(fā)現(xiàn)照著這個模板來做的話,可以正常獲取到數(shù)據(jù),然而換成我自己的項目之后,就取不出來。通過我在項目打印標(biāo)記,知道已經(jīng)是能正常訪問到我的controller,那么是在哪里導(dǎo)致不行呢?

觀察截圖箭頭所指的位置json.products,說明按照這個官方提供的鏈接獲取的json,是有一個命名為products的,通過對比我自己項目返回的數(shù)據(jù),終于發(fā)現(xiàn)了一些區(qū)別。

官方鏈接的API:https://api.myjson.com/bins/74l63     (注意“74l63”中的“l”是英文字母“L”的小寫,不是1,這里也坑了我好一會)

我自己的項目(局部):

觀察開頭,我們發(fā)現(xiàn)官方提供的是一個JSON對象,是由{"products":[{"id":……開頭的,而我的項目返回的是JSON數(shù)組,[{"id":……,所以區(qū)別就在這里了。

因此,在自己的項目里,JSON數(shù)組直接是賦值就可以了。

最后,終于能夠成功取值了!接下來該干嘛干嘛去吧。

這是為了整理我自己的學(xué)習(xí)筆記,也可以分享到剛好需要的人,很少寫教程,不足之處還請見諒!

Vue項目JSON格式字符串和對象之間的互轉(zhuǎn)

1、將對象轉(zhuǎn)換為JSON格式字符串

JSON.stringify(object)

2、將JSON字符串轉(zhuǎn)換為對象

JSON.parse(jsonString);

到此這篇關(guān)于JSON數(shù)組和JSON對象在vue中的獲取方法的文章就介紹到這了,更多相關(guān)vue獲取json數(shù)組和json對象內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!

相關(guān)文章

  • vue 綁定對象,數(shù)組之?dāng)?shù)據(jù)無法動態(tài)渲染案例詳解

    vue 綁定對象,數(shù)組之?dāng)?shù)據(jù)無法動態(tài)渲染案例詳解

    這篇文章主要介紹了vue 綁定對象,數(shù)組之?dāng)?shù)據(jù)無法動態(tài)渲染案例詳解,本篇文章通過簡要的案例,講解了該項技術(shù)的了解與使用,以下就是詳細(xì)內(nèi)容,需要的朋友可以參考下
    2021-09-09
  • 簡單理解vue中Props屬性

    簡單理解vue中Props屬性

    這篇文章主要幫助大家簡單的理解vue中Props屬性,文中示例代碼介紹的非常詳細(xì),具有一定的參考價值,感興趣的小伙伴們可以參考一下
    2016-10-10
  • vue-scroller記錄滾動位置的示例代碼

    vue-scroller記錄滾動位置的示例代碼

    本篇文章主要介紹了vue-scroller記錄滾動位置的示例代碼,小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧
    2018-01-01
  • 適用于 Vue 的播放器組件Vue-Video-Player操作

    適用于 Vue 的播放器組件Vue-Video-Player操作

    這篇文章主要介紹了適用于 Vue 的播放器組件Vue-Video-Player操作,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧
    2020-11-11
  • 前端開發(fā)利器Vite完整版詳解

    前端開發(fā)利器Vite完整版詳解

    這篇文章主要給大家介紹了關(guān)于前端開發(fā)利器Vite完整版詳解的相關(guān)資料,Vite是一種基于ES模塊的開發(fā)服務(wù)器和構(gòu)建工具,專為現(xiàn)代化的前端開發(fā)而設(shè)計,需要的朋友可以參考下
    2023-11-11
  • 多個vue子路由文件自動化合并的方法

    多個vue子路由文件自動化合并的方法

    這篇文章主要給大家介紹了關(guān)于多個vue子路由文件自動化合并的相關(guān)資料,文中通過示例代碼介紹的非常詳細(xì),對大家學(xué)習(xí)或者使用vue具有一定的參考學(xué)習(xí)價值,需要的朋友們下面來一起學(xué)習(xí)學(xué)習(xí)吧
    2019-09-09
  • vue webuploader 文件上傳組件開發(fā)

    vue webuploader 文件上傳組件開發(fā)

    本篇文章主要介紹了vue webuploader 文件上傳組件開發(fā),小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧
    2017-09-09
  • Vue實現(xiàn)點(diǎn)擊按鈕下載文件的操作代碼(后端Java)

    Vue實現(xiàn)點(diǎn)擊按鈕下載文件的操作代碼(后端Java)

    最近項目中需要實現(xiàn)點(diǎn)擊按鈕下載文件的需求,前端用的vue后端使用的java代碼,今天通過本文給大家分享vue點(diǎn)擊按鈕下載文件的實現(xiàn)代碼,需要的朋友參考下吧
    2021-08-08
  • vue如何將導(dǎo)航欄、頂部欄設(shè)置為公共頁面

    vue如何將導(dǎo)航欄、頂部欄設(shè)置為公共頁面

    這篇文章主要介紹了vue如何將導(dǎo)航欄、頂部欄設(shè)置為公共頁面問題,具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教
    2023-01-01
  • vue實現(xiàn)商品詳情頁功能之商品選項卡

    vue實現(xiàn)商品詳情頁功能之商品選項卡

    這篇文章主要為大家詳細(xì)介紹了vue實現(xiàn)商品詳情頁功能之商品選項卡,文中示例代碼介紹的非常詳細(xì),具有一定的參考價值,感興趣的小伙伴們可以參考一下
    2021-04-04

最新評論