VUE data= name 张三 age 12 desc 我是张三 name 李四 age 21 desc 我是李四 怎么把json字符串转成这种格式
要将一个 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 数组,将其渲染为列表项
原文地址: https://www.cveoy.top/t/topic/iuyi 著作权归作者所有。请勿转载和采集!