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