Vue中引入json的三種方式總結(jié)
更新時(shí)間：2023年05月17日 17:01:09 作者：青顏的天空
這篇文章主要介紹了Vue中引入json的三種方式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
vue引入json的三種方式
json的定義
JSON(JavaScript Object Notation) 是一種輕量級(jí)的數(shù)據(jù)交換格式。
JSON 是 JS 對(duì)象的字符串表示法，它使用文本表示一個(gè) JS 對(duì)象的信息，本質(zhì)是一個(gè)字符串。
1.require-運(yùn)行時(shí)加載
test.json文件
{
? "testData": "hello world",
? "testArray": [1,2,3,4,5,6],
? "testObj": {
? ? "name": "tom",
? ? "age": 18
? }
}// require引用：
mounted() {
? ? // require引用時(shí)，放src和放statci都可以，建議放static
? ? const testJson = require('../../static/json/test.json');
? ? const {testData, testArray, testObj} = testJson;
? ? console.log('testData',testData);
? ? // ‘hello world'
? ? console.log('testArray',testArray);
? ? // [1,2,3,4,5,6]
? ? console.log('testObj',testObj);
}2.import-編譯時(shí)輸出接口
// import 引用
// import引用時(shí)，放src和放statci都可以，建議放static
import testImportJson from '../../static/json/test.json'
// import testImportJson from './json/test.json'
export default {
? data(){
? ? return{
? ? ? testImportJson ?
? ? }
? },
? mounted() {
? ? const {testData, testArray, testObj} = this.testImportJson;
? }
}3. 通過(guò)http請(qǐng)求獲取
// http引用
methods:{
? async jsonHttpTest(){
? ? const res = await this.$http.get('http://localhost:8080/static/json/test.json');
? ? // 放在src中的文件都會(huì)被webpack根據(jù)依賴編譯，無(wú)法作為路徑使用，static中的文件才可以作為路徑用
? ? const {testData, testArray, testObj} = res.data;
? }
},
mounted() {
? this.jsonHttpTest();
},vue解析json數(shù)據(jù)
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<title></title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="https://cdn.bootcss.com/vue/2.2.2/vue.min.js"></script><!--vue.min.js的庫(kù)-->
<script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script><!--jQuery庫(kù)-->
</head>
<body>
<div id="main">
<div v-for="item in rows">
<p>姓名:{{item.name}}</p>
<p>昵稱:{{item.nick}}</p>
</div>
</div>
</body>
<script>
$(document).ready(function () {
$.getJSON("data.json", function (result, status) {
var v = new Vue({
el: '#main',
data: {
rows: result
}
})
});
});
</script>
</html>test.json
[
{
"name": "王小婷",
"nick": "祈澈菇?jīng)?
}, {
"name": "安安",
"nick": "壞兔子"
}, {
"name": "編程微刊",
"nick": "簡(jiǎn)書(shū)"
}
]總結(jié)
以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要介紹了vue3?父子組件間相互傳值方式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-06-06
vscode jsconfig.json 使用簡(jiǎn)介
通過(guò)jsconfig.json文件定義一個(gè)JavaScript項(xiàng)目,目錄中是否存在此類文件表示該目錄是JavaScript項(xiàng)目的根目錄,文件本身可以選擇列出屬于項(xiàng)目的文件,要從項(xiàng)目中排除的文件以及編譯器選項(xiàng),這篇文章主要介紹了vscode jsconfig.json 使用說(shuō)明,需要的朋友可以參考下2023-09-09
vue實(shí)現(xiàn)定時(shí)刷新數(shù)據(jù),每隔5分鐘執(zhí)行一次
這篇文章主要介紹了vue實(shí)現(xiàn)定時(shí)刷新數(shù)據(jù),每隔5分鐘執(zhí)行一次問(wèn)題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-01-01
vue實(shí)現(xiàn)學(xué)生信息管理系統(tǒng)
這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)學(xué)生信息管理系統(tǒng)，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2020-05-05
vue中的過(guò)濾器及其時(shí)間格式化問(wèn)題
這篇文章主要介紹了vue中的過(guò)濾器及其時(shí)間格式化,本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2020-04-04
vue實(shí)現(xiàn)在線預(yù)覽pdf文件和下載（pdf.js）
這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)在線預(yù)覽pdf文件和下載，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2019-11-11
vue-iview動(dòng)態(tài)新增和刪除的方法
這篇文章主要為大家詳細(xì)介紹了vue-iview動(dòng)態(tài)新增和刪除的方法，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2020-06-06
這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)通訊錄功能，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2018-07-07
發(fā)布訂閱模式在vue中的實(shí)際運(yùn)用實(shí)例詳解
訂閱發(fā)布模式定義了一種一對(duì)多的依賴關(guān)系，讓多個(gè)訂閱者對(duì)象同時(shí)監(jiān)聽(tīng)某一個(gè)主題對(duì)象。這篇文章主要介紹了發(fā)布訂閱模式在vue中的實(shí)際運(yùn)用,需要的朋友可以參考下2019-06-06
這篇文章主要介紹了vue地區(qū)選擇組件主要用于全國(guó)地區(qū)數(shù)據(jù)的操作，包括省，市，區(qū)三級(jí)聯(lián)動(dòng)，地區(qū)數(shù)據(jù)的添加和刪除,本文重點(diǎn)給大家介紹vue地區(qū)選擇組件教程詳解，需要的朋友參考下吧2018-05-05