vue中放json-vue中引入json数据：代码示例

温馨提示：这篇文章已超过230天没有更新，请注意相关的内容是否还可用！

在Vue中，我们可以使用import语句引入JSON数据。我们需要创建一个JSON文件，其中包含我们想要引入的数据。然后，在Vue组件中，我们可以使用import语句将JSON数据导入到组件中。

示例代码如下所示：

1. 创建一个名为data.json的JSON文件，并在其中定义我们想要引入的数据：


{
  "name": "John",
  "age": 25,
  "email": "john@example.com"
}

2. 然后，在Vue组件中，使用import语句将JSON数据导入到组件中：


import jsonData from './data.json';
export default {
  data() {
    return {
      person: jsonData
    };
  }
}

在上面的代码中，我们使用import语句将data.json文件导入到组件中，并将其赋值给变量jsonData。然后，我们在data属性中创建了一个名为person的属性，并将jsonData赋值给它。

现在，我们可以在Vue组件中使用person属性来访问JSON数据。例如，我们可以在模板中显示person的name属性：


<template>
  <div>
    <h1>{{ person.name }}</h1>
    <p>Age: {{ person.age }}</p>
    <p>Email: {{ person.email }}</p>
  </div>
</template>

在上面的代码中，我们使用双花括号语法将person的name属性显示在h1标签中，将age和email属性显示在p标签中。

通过以上步骤，我们成功地在Vue中引入了JSON数据，并可以在组件中使用它。