h5引入json_Vue中如何使用本地Json文件?

我需要將菜單配置成Json文件,然后再程序中引入

{{menu.name}}

import menuListConfig from '../../config/menu.json'

export default {

name: "Sider",

data(){

return {

menuList:JSON.parse(JSON.stringify(menuListConfig))

}

}

}

需要如何做,才能v-for遍歷json文件?謝謝

回答

webpack配置項增加json解析插件,并安裝:

npm i json-loader -d //先裝插件

修改webpack配置

//webpack.config.js

module:{

rules:[{

test: /\.json$/,

loader: 'json-loader',

}],

}

//或者vue.config.js

configureWebpack: {

module:{

rules:[{

test: /\.json$/,

loader: 'json-loader',

}],

}

}

即便如此,還是先看看解析結果是啥再說:

0a085c60faadc3ff022a85ba32248d58.png

import最好是加載js文件,條件允許還是不要用json文件,錯誤率會低一些,應為json文件的格式要求很高。

本文來自互聯網用戶投稿,該文觀點僅代表作者本人,不代表本站立場。本站僅提供信息存儲空間服務,不擁有所有權,不承擔相關法律責任。
如若轉載,請注明出處:http://www.pswp.cn/news/542681.shtml
繁體地址,請注明出處:http://hk.pswp.cn/news/542681.shtml
英文地址,請注明出處:http://en.pswp.cn/news/542681.shtml

如若內容造成侵權/違法違規/事實不符,請聯系多彩編程網進行投訴反饋email:809451989@qq.com,一經查實,立即刪除!

相關文章

深入學習jQuery選擇器系列第四篇——過濾選擇器之屬性選擇器

前面的話 屬性過濾選擇器的過濾規則是通過元素的屬性來獲取相應的元素,對應于CSS中的屬性選擇器。屬性過濾選擇器可分為簡單屬性選擇器、具體屬性選擇器和條件屬性選擇器三種。本文將詳細該部分內容 簡單屬性選擇器 [attribute] [attribute]選擇器選擇擁有該屬性的元…

c++ scanf讀取_使用scanf()讀取內存地址并在C中打印其值

c scanf讀取Here, we have to input a valid memory address and print the value stored at memory address in C. 在這里,我們必須輸入一個有效的內存地址并在C中打印存儲在內存地址中的值。 To input and print a memory address, we use "%p" format…

python正則匹配_Python正則表達式只匹配一次

我正在嘗試創建一個簡單的降價乳膠轉換器,只是為了學習 python和基本的正則表達式,但我不知道試圖弄清楚為什么下面的代碼不起作用: re.sub (r\[\*\](.*?)\[\*\]: ?(.*?)$, r\\footnote{\2}\1, s, flagsre.MULTILINE|re.DOTALL) 我想轉換像: s "…

Virtual Network (1) - How to use it in a guest

本文將講述一個問題:kvm guest使用libvirt xml定義如何使用virtual network?1)nat, route ,isolated, open類型在host中定義virtual network會創建一個虛擬的bridge,相當于一個交換機。guest只需要連接到這…

java string做除法_如果用java來實現傳統方式的除法,用String來保存結果,想精確多少位都行,那改怎么做?...

我會加分的,提個思路都行,目前做了個乘法和加法,但是現在對除法沒有什么思路。以下是我編寫的功能:publicclassCalculator{publicstaticStringmulti(Strings1,Strings2){if(s1nu...我會加分的,提個思路都行&#xff0c…

c語言數組的聲明和初始化_C聲明和初始化能力問題和解答

c語言數組的聲明和初始化This section contains aptitude questions and answers on C language Declarations and Initialization. 本節包含有關C語言聲明和初始化的適切性問題和解答。 1) What will be the output of following program ? int main(){int m10;int xprintf(…

python2和python3的默認編碼_python2和python3哪個版本新

Python2 還是 Python3 ? py2.7是2.x系列的最后一個版本,已經停止開發,不再增加新功能。2020年終止支持。 所有的最新的標準庫的更新改進,只會在3.x的版本里出現。Python3.0在2008年就發布出來,而2.7作為2.X的最終版本并…

html-css樣式表

一、CSS:Cascading Style Sheet—層疊樣式表,其作用是美化HTML網頁。 樣式表分類:內聯樣式表、內嵌樣式表、外部樣式表 1、內聯樣式表 和HTML聯合顯示,控制精確,但是可重用性差,冗余多。 例如:&…

java 棧 先進后出_棧先進后出,堆先進先出

1.棧(stack)與堆(heap)都是Java用來在Ram中存放數據的地方。與C不同,Java自動管理棧和堆,程序員不能直接地設置棧或堆。2.棧的優勢是,存取速度比堆要快,僅次于直接位于CPU中的寄存器。但缺點是,存在棧中的數據大小與生…

c#給定二維數組按升序排序_在數組中按升序對數字進行排序| 8086微處理器

c#給定二維數組按升序排序Problem: Write a program in 8086 microprocessor to sort numbers in ascending order in an array of n numbers, where size n is stored at memory address 2000 : 500 and the numbers are stored from memory address 2000 : 501. 問題&#xf…

使用python套用excel模板_Python自動化辦公Excel-從表中批量復制粘貼數據到新表

1、模塊安裝 1)cmd模式下: pip install -i https://pypi.tuna.tsinghua.edu.cn/simple xlrd pip install -i https://pypi.tuna.tsinghua.edu.cn/simple openpyxl 2)如果有安裝Pycharm,則在程序中操作如下: 菜單欄&…

在HubSpot是如何應對Fat JAR困境的

在七月底,Spring Boot和Dropwizard分別發布了1.4和1.0版本,它們都是基于Fat JAR的。隨著人們更多地采用這些框架和微服務架構,Fat JAR成為了通用的部署機制。\\Fat JAR技術會將Java應用的所有依賴打包到一個bundle之中,便于執行&a…

給定數字的b+樹創建_在C ++中找到給定數字中的兩個的下一個和上一個冪

給定數字的b樹創建Problem statement: 問題陳述: Find Next and previous power of two of a given number 查找給定數字中兩個的下一個和上一個冪 Next power of two 下一個二的冪 Example(1):input: 22output: 32 ( as 32 is 2^5)Example(2):input: 54output…

java 字節數組作用_這段java代碼中字節數組b起到了什么作用?

importjava.io.*;importjavax.swing.*;publicclassIOMonitor{publicstaticvoidmain(String[]temp){//TODO自動生成的方法存根byteb[]newbyte[2];try{FileInputStreamfisnewFileInput...import java.io.*;import javax.swing.*;public class IOMonitor {public static void main…

如何查看本地的崩潰log_過年回家,還怕搶不到票?程序員教你如何搶票

2019年接近尾聲,距離春節回家的日子越來越近,26日起,2020年除夕火車票正式開售,搶票大戰也進入白熱化階段。是否為某搶票 App 加速而煩惱,是否為車票“秒光而煩惱”。別慌,作為連“對象”都是 new 出來的程…

獲取列表中包含的元素數 在C#中

Given a list, and we have to count its total number of elements using List.Count property. 給定一個列表,我們必須使用List.Count屬性計算其元素總數 。 C#清單 (C# List) A list is used to represent the list of the objects, it is represent…

I00037 虧數(Deficient number)

數論中,若一個正整數除了本身之外所有因子之和比此數自身小,則稱此數為虧數。虧數(Deficient number)也稱為缺數,參見百度百科_虧數,或參見維基百科的Deficient number。虧數在OEIS中的數列號為A005100。 問…

hashmap轉紅黑樹的閾值為8_面試必考的 HashMap,這篇總結到位了

點擊藍色“JavaKeeper”關注我喲加個“星標”,一起成長,做牛逼閃閃的技術人1 概述HashMap是基于哈希表實現的,每一個元素是一個key-value對,其內部通過單鏈表解決沖突問題,容量不足(超過了閥值)時,同樣會自動增長.HashMap是非線程安全的,只適用于單線程環…

linux用戶組管理命令_Linux用戶和組命令能力問題和解答

linux用戶組管理命令This section contains Aptitude Questions and Answers on Linux User and Group Commands. 本節包含有關Linux用戶和組命令的 Aptitude問答。 1) Which of the following commands is used to create a new user in the Linux operating system? create…

Failed to start firewalld.service: Unit firewalld.service is masked.

2019獨角獸企業重金招聘Python工程師標準>>> FireWall in Centos 7 masked How to resolve the error message belowFailed to issue method call: Unit firewalld.service is masked. The main reason a service is masked is to prevent accidental starting or e…