在 vue cli 4.2.3 的 webapp 中使用本地 json 的内容答案

【问题标题】：use the content of local json in a webapp in vue cli 4.2.3在 vue cli 4.2.3 的 webapp 中使用本地 json 的内容
【发布时间】：2020-03-30 12:27:44
【问题描述】：

我基本上是在尝试使用 json 文件来存储少量数据并在组件中使用它们。

[
  {
    "heroTitle": [
      "Banner image",
      "assets/images/banner/sunset.jpg",
      "sunset.jpg"
    ],
  }
]

上面是一个示例 json 下面是我的组件

<template>
  <header>
    <div class="hero">
      <h1 class="hero__title">"banner name here"</h1>
      <img src="image path and file here" alt="alt text here" />
    </div>
  </header>
</template>

另外，有没有办法从应用程序本身编辑 jason？

【问题讨论】：

标签： json vue.js

【解决方案1】：

当然，您可以在 Vue 组件中使用本地 JSON 数据。假设你在 Vue 组件的 data 对象中有这个 JSON 数据，那么你可以使用 Vue 模板语法（tick 语法），例如“this.heroTitle[0]”，它指的是“Banner Image”。

【讨论】：

我是 vue 的新手，你能帮忙看看语法和导入方法吗，我在网上搜索但没能理解。