要将一个 JSON 字符串转换为 Vue 中的数据格式,你可以使用 JSON.parse() 方法将字符串转换为 JavaScript 对象,然后将该对象赋值给 Vue 的 data 属性。

以下是将给定的 JSON 字符串转换为 Vue 中的 data 格式的示例代码:

<template>
  <div>
    <ul>
      <li v-for="person in data" :key="person.name">
        <h2>{{ person.name }}</h2>
        <p>年龄:{{ person.age }}</p>
        <p>{{ person.desc }}</p>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      data: []
    };
  },
  mounted() {
    const jsonString = '[{ "name": "张三", "age": "12", "desc": "我是张三" }, { "name": "李四", "age": "21", "desc": "我是李四" }]';
    this.data = JSON.parse(jsonString);
  }
};
</script>

在上面的示例中,我们首先在 data 属性中定义了一个空数组 data。然后,在 mounted 钩子中,我们使用 JSON.parse() 方法将给定的 JSON 字符串转换为一个 JavaScript 对象,并将该对象赋值给 data 属性。最后,在模板中使用 v-for 指令遍历 data 数组,将其渲染为列表项

VUE data= name 张三 age 12 desc 我是张三 name 李四 age 21 desc 我是李四 怎么把json字符串转成这种格式

原文地址: https://www.cveoy.top/t/topic/iuyi 著作权归作者所有。请勿转载和采集!

免费AI点我,无需注册和登录