vue2调用json数据写入html

Vue 2.x 中，你可以通过 Vue 的模板语法将 JSON 数据动态绑定到 HTML 元素上。首先，你需要获取 JSON 数据，这通常来自于 API 调用、组件属性或者是vuex的状态管理。下面是简单的步骤：

1. **设置数据**: 在 Vue 实例的 `data` 或者 `computed` 中定义一个变量来存储 JSON 数据。

new Vue({
  data() {
    return {
      jsonData: {} // 这里假设你已经从某个地方获取了 JSON 数据并赋值给 jsonData
    };
  },
});

2. **模板绑定**: 在模板（`.vue`文件中的 `<template>` 标签内）中，使用双大括号 (`{{}}`) 来插值数据，如遍历 JSON 对象的键值对。

<div v-for="(item, key) in jsonData" :key="key">
  <p>{{ item.key }}: {{ item.value }}</p>
</div>

这里的 `v-for` 是 Vue 的循环指令，它会遍历 `jsonData` 对象的每个元素。

3. **更新数据**: 当 JSON 数据发生变化时，只要这个数据与视图中的绑定有关，Vue 自动会更新视图，无需手动操作。