JSON文件在Vue页面中怎么使用

原创已于 2024-01-22 10:40:59 修改 · 3.4k 阅读

16 ·

CC 4.0 BY-SA版权

文章标签：

#json #html5 #javascript #vue.js #html

于 2024-01-17 10:07:48 首次发布

前端的诱惑专栏收录该内容

20 篇文章

订阅专栏

要在 Vue 页面中使用 JSON 文件，需要先通过 HTTP 请求或其他方式将 JSON 文件加载到 Vue 应用中。

常用的基本有3种方式：

1、使用浏览器的内置 fetch 方法来加载 JSON 文件。

假设有一个名为 data.json 的 JSON 文件，它的内容如下所示：

[
  {
    "name": "Product A",
    "price": 10.00
  },
  {
    "name": "Product B",
    "price": 20.00
  },
  {
    "name": "Product C",
    "price": 30.00
  }
]

要在 Vue 页面中使用该文件，可以使用以下代码：

<template>
  <div>
    <h1>Products</h1>
    <ul>
      <li v-for="product in products" :key="product.name">
        {{ product.name }} - ${{ product.price.toFixed(2) }}
      </li>
    </ul>
  </div>
</template>
<script>
export default {
  data() {
    return {
      products: []
    };
  },
  created() {
    fetch('/data.json')
      .then(response => response.json())
      .then(data => {
        this.products = data;
      });
  }
};
</script>

在上面的代码中，定义了一个名为 products 的数组，它将在页面加载时被填充。

使用created 钩子函数来加载 JSON 文件，使用 fetch 方法来加载文件并将其解析为 JSON 数据。

然后将数据保存在 products 属性中，toFixed() 方法四舍五入保留了price小数点后两位，使其在模板中可用。

2、使用 axios 库加载 JSON 文件

除了使用浏览器内置的 fetch 方法，你还可以使用 axios 库来加载 JSON 文件。

axios 是一个流行的 JavaScript 库，用于发出 HTTP 请求和处理响应。它支持异步请求，并提供了许多高级功能，例如拦截器、请求取消等等。

要使用 axios 加载 JSON 文件，首先要安装 axios 库。

可以使用 npm 或 yarn 来安装：

npm install axios
# 或者
yarn add axios

然后使用以下代码来加载 JSON 文件：

<template>
  <div>
    <h1>Products</h1>
    <ul>
      <li v-for="product in products" :key="product.name">
        {{ product.name }} - ${{ product.price.toFixed(2) }}
      </li>
    </ul>
  </div>
</template>

<script>
import axios from 'axios';
export default {
  data() {
    return {
      products: []
    };
  },
  created() {
    axios.get('/data.json')
      .then(response => {
        this.products = response.data;
      });
  }
};
</script>

上面的代码是在模板中创建了一个简单的产品列表。

在 Vue 实例中，定义了一个名为 products 的数组，它将在页面加载时被填充。

使用created 钩子函数来加载 JSON 文件。

在函数中，使用 axios 库的 get 方法来加载文件并将其解析为 JSON 数据。

然后将数据保存在 products 属性中，toFixed() 方法四舍五入保留了price小数点后两位，使其在模板中可用。

3、将 JSON 文件导入为模块

另一种加载 JSON 文件的方式是将其导入为一个模块。

在 Vue 组件中使用 import 语句来导入 JSON 文件，然后就可以直接在模板中使用导入的对象。

要使用这种方法，首先需要确保构建工具支持 JSON 文件。例如，在使用 webpack 时，你需要安装 json-loader：

npm install json-loader
# 或者
yarn add json-loader

然后使用以下代码来导入 JSON 文件：

<template>
  <div>
    <h1>Products</h1>
    <ul>
      <li v-for="product in products" :key="product.name">
        {{ product.name }} - ${{ product.price.toFixed(2) }}
      </li>
    </ul>
  </div>
</template>

<script>
import products from './data.json';
export default {
  data() {
    return {
      products: products
    };
  }
};
</script>

在上面的代码中，使用 import 语句将 data.json 文件导入为 products 对象。

然后将该对象保存在 Vue 实例的 data 属性中，toFixed() 方法四舍五入保留了price小数点后两位，并将其用于模板中。

这种方法不需要使用任何异步请求，可以更快地加载数据。

[1] 阅读原文

我是Just，公众号[ 设计师工作日常 ]，求点赞求关注！！！skr~ skr~