vue獲取后臺json字符串方式
更新時(shí)間：2022年04月07日 16:13:20 作者：逐夢十年
這篇文章主要介紹了vue獲取后臺json字符串方式，具有很好的參考價(jià)值，希望對大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
vue獲取后臺json字符串
1.在api文件下的driver.js文件下寫一個(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鉤子下在頁面渲染初始過程獲取json，獲取通過箭頭函數(shù)，同時(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ù)，進(jìn)而到頁面渲染
this.data = obj;
// console.log(obj);
console.log(obj[0].id); //查看第一層級下的id值
}4.最后要注意在data數(shù)據(jù)中對json初始值進(jìn)行格式設(shè)置，以及初始值賦值。
data() {
return {
data:
//先給data對象為空
[
{},{},{}
],
//樹形控件需要配置的默認(rèn)信息，與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ù)組項(xiàng)拼接成字符串，以逗號,分隔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支持的方式，不需要嚴(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在App.vue文件中監(jiān)聽路由變化刷新頁面操作
這篇文章主要介紹了vue在App.vue文件中監(jiān)聽路由變化刷新頁面操作，具有很好的參考價(jià)值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-08-08
這篇文章主要介紹了vue引用js文件的多種方式,本文大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2018-05-05
這篇文章主要給大家介紹了關(guān)于vue3.0中使用element的相關(guān)資料，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2021-03-03
vue mvvm數(shù)據(jù)響應(yīng)實(shí)現(xiàn)
這篇文章主要介紹了vue mvvm數(shù)據(jù)響應(yīng)實(shí)現(xiàn)的方法，幫助大家更好的理解和使用vue，感興趣的朋友可以了解下2020-11-11
這篇文章主要為大家介紹了vue3封裝自定義v-model的hooks示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-07-07
這篇文章主要介紹了vue中的生命周期及鉤子函數(shù),Vue?實(shí)例有一個(gè)完整的生命周期，也就是從開始創(chuàng)建、初始化數(shù)據(jù)、編譯模板、掛載?Dom、渲染,下面文章詳細(xì)介紹,需要的朋友可以參考一下2021-12-12
最近在寫閉包的應(yīng)用的時(shí)候，出現(xiàn)了一個(gè)cached函數(shù)，來源于Vue源碼，利用了閉包變量不會被回收的特點(diǎn)，可以緩存變量，cached本質(zhì)上是一個(gè)高階函數(shù)，它接受一個(gè)函數(shù)的參數(shù)，同時(shí)返回一個(gè)函數(shù)2022-08-08
這篇文章主要介紹了el-select 下拉框全選、多選的幾種方式組件示例詳解,本文通過示例代碼給大家介紹的非常詳細(xì),對大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友參考下吧2023-12-12
本文主要介紹了淺談Vue?DIFF，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2023-05-05
key屬性是一個(gè)特殊的屬性，用于標(biāo)識每個(gè)節(jié)點(diǎn)的唯一性。在Vue2.x版本中的key和Vue3.x版本中的key有很大的不同，那么在這篇文章中，我們將會討論Vue2中的key和Vue3中的key的區(qū)別2023-04-04