vue獲取后臺(tái)json字符串方式
vue獲取后臺(tái)json字符串
1.在api文件下的driver.js文件下寫(xiě)一個(gè)獲取json的函數(shù)
export const tree = () => request({
url: 'driver/tree',
method: 'post',
})2.在view文件下的driver文件下的index.vue文件里引入driver.js文件下的tree函數(shù)
import Tree, { tree } from '@/api/driver'3.在生命周期函數(shù)created鉤子下在頁(yè)面渲染初始過(guò)程獲取json，獲取通過(guò)箭頭函數(shù)，同時(shí)注意json格式，如果后臺(tái)傳來(lái)的是字符串，要通過(guò)函數(shù)將其轉(zhuǎn)換成對(duì)象類(lèi)型。
created(){
tree().then((str) =>{
console.log(111111); // 觸發(fā)生命周期函數(shù)
// console.log(str);
//后臺(tái)給的是字符串，轉(zhuǎn)換成對(duì)象類(lèi)型
let obj = JSON.parse(str);
//把json字符串傳遞到data數(shù)據(jù)，進(jìn)而到頁(yè)面渲染
this.data = obj;
// console.log(obj);
console.log(obj[0].id); //查看第一層級(jí)下的id值
}4.最后要注意在data數(shù)據(jù)中對(duì)json初始值進(jìn)行格式設(shè)置，以及初始值賦值。
data() {
return {
data:
//先給data對(duì)象為空
[
{},{},{}
],
//樹(shù)形控件需要配置的默認(rèn)信息，與json匹配
defaultProps: {
children: 'childs',
label: 'name',
}
};5.要控制臺(tái)查看本層的對(duì)象，需要 用[]中括號(hào)指定層級(jí)
console.log(obj[0].id); //查看第一層級(jí)下的id值
vue字符串與Json轉(zhuǎn)換
字符串與數(shù)組之間的相互轉(zhuǎn)換
1.字符串轉(zhuǎn)換為數(shù)組
str.split(','); // 以逗號(hào),為拆分的字符串2.數(shù)組轉(zhuǎn)換為字符串
arr.join(','); // 把數(shù)組項(xiàng)拼接成字符串，以逗號(hào),分隔Json字符串轉(zhuǎn)換為json對(duì)象
1.使用eval
result = eval('(' + jsonstr + ')'); // jsonstr是json字符串2.使用JSON.parse()
result = JSON.parse(jsonstr); // jsonstr是json字符串
eval和JSON.parse的區(qū)別：
eval 是javascript支持的方式，不需要嚴(yán)格的json格式的數(shù)據(jù)也可以轉(zhuǎn)化
JSON.parse 是瀏覽器支持的轉(zhuǎn)換方式，必須要標(biāo)準(zhǔn)的json格式才可以轉(zhuǎn)換
以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
vue.js在標(biāo)簽屬性中插入變量參數(shù)的方法
這篇文章主要介紹了vue.js在標(biāo)簽屬性中插入變量參數(shù)的方法,非常不錯(cuò)，具有參考借鑒價(jià)值，需要的朋友可以參考下2018-03-03
vue單頁(yè)面SEO優(yōu)化的實(shí)現(xiàn)
本文主要介紹了vue單頁(yè)面SEO優(yōu)化的實(shí)現(xiàn)，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2022-06-06
Vuejs第七篇之Vuejs過(guò)渡動(dòng)畫(huà)案例全面解析
這篇文章主要介紹了Vuejs第七篇之Vuejs過(guò)渡動(dòng)畫(huà)案例全面解析的相關(guān)資料,需要的朋友可以參考下2016-09-09
vue3?內(nèi)容過(guò)多出現(xiàn)滾動(dòng)條時(shí)滾動(dòng)條自動(dòng)定位到末端的操作代碼
這篇文章主要介紹了vue3?內(nèi)容過(guò)多出現(xiàn)滾動(dòng)條時(shí)滾動(dòng)條自動(dòng)定位到末端的操作代碼,本文給大家介紹的非常詳細(xì),需要的朋友參考下吧2024-05-05
vue3+Element Plus實(shí)現(xiàn)自定義穿梭框的詳細(xì)代碼
找到一個(gè)好用的vue樹(shù)形穿梭框組件都很難,又不想僅僅因?yàn)橐粋€(gè)穿梭框在element-ui之外其他重量級(jí)插件,本文給大家分享vue3+Element Plus實(shí)現(xiàn)自定義穿梭框的示例代碼,感興趣的朋友一起看看吧2024-01-01
Vue.js框架是什么，為什么要選擇它？這篇文章為大家介紹目前前端技術(shù)使用的趨勢(shì)，以及Vue.js的優(yōu)點(diǎn)和適用場(chǎng)景等，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-10-10
這篇文章主要介紹了vue antd Form表單的使用及說(shuō)明，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-04-04
這篇文章主要為大家詳細(xì)介紹了vue-awesome-swiper滑塊插件的使用方法，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-11-11
這篇文章主要介紹了Vue進(jìn)階構(gòu)造屬性，從4個(gè)方面來(lái)進(jìn)行講解：Directive、Mixin 混入、Extends 繼承、provide 和 inject，感興趣的小伙伴們，趕快來(lái)看一下2021-05-05
Vue+Element UI+vue-quill-editor富文本編輯器及插入圖片自定義
這篇文章主要為大家詳細(xì)介紹了Vue+Element UI+vue-quill-editor富文本編輯器及插入圖片自定義，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2019-08-08