vue之中 把json数据转化为ts限制的类型

vue之中 把json转化为ts

  • vscode安装 插件 json2ts
  • 使用 ctrl + alt + v 去形成 ts的类型模式

test.json

{
  "diseaseh5Shelf": {
    "lastUpdateTime": "2022-03-24 20:40:02",
    "chinaTotal": {
      "confirm": 443723,
      "importedCase": 17096,
      "dead": 12261,
      "suspect": 13,
      "noInfect": 24062,
      "heal": 159794,
      "nowConfirm": 271668,
      "nowSevere": 50,
      "showLocalConfirm": 1,
      "localConfirm": 26671,
      "noInfectH5": 22564,
      "localConfirmH5": 24953,
      "showlocalinfeciton": 1,
      "local_acc_confirm": 139285
    },
    "chinaAdd": {
      "heal": 2362,
      "suspect": 1,
      "nowSevere": 0,
      "importedCase": 44,
      "noInfect": 2829,
      "localConfirm": 3012,
      "noInfectH5": 2722,
      "confirm": 5076,
      "nowConfirm": 2308,
      "localConfirmH5": 2010,
      "dead": 406
    }
  }
  // ctrl + alt + v
  // 效果
  export interface ChinaTotal {
	confirm: number;
	importedCase: number;
	dead: number;
	suspect: number;
	noInfect: number;
	heal: number;
	nowConfirm: number;
	nowSevere: number;
	showLocalConfirm: number;
	localConfirm: number;
	noInfectH5: number;
	localConfirmH5: number;
	showlocalinfeciton: number;
	local_acc_confirm: number;
}

export interface ChinaAdd {
	heal: number;
	suspect: number;
	nowSevere: number;
	importedCase: number;
	noInfect: number;
	localConfirm: number;
	noInfectH5: number;
	confirm: number;
	nowConfirm: number;
	localConfirmH5: number;
	dead: number;
}

export interface Diseaseh5Shelf {
	lastUpdateTime: string;
	chinaTotal: ChinaTotal;
	chinaAdd: ChinaAdd;
}

export interface RootObject {
	diseaseh5Shelf: Diseaseh5Shelf;
}
}

vue之中 把json格式的数据,转化为ts的type格式

  • 安装 vscode插件
    • JSON Tto TS
  • 快捷键:
    ctrl + shif + alt + v || s
{
  "data": [{
    "name": "菜鸡",
    "price": 111,
    "id": 111
  }, {
    "name": "菜狗",
    "price": 222,
    "id": 222
  }, {
    "name": "菜鸟",
    "price": 333,
    "id": 333
  }]
}
效果:
interface RootObject {
  name: string;
  price: number;
  id: number;
}
  • 0
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
要把 JSON 数据换成列表,你需要使用 Vue3 中提供的 v-for 指令来遍历数据。v-for 指令可以遍历一个数组并渲染数组中的每个元素。 首先,你需要将 JSON 数据换成一个数组。你可以使用 JavaScript 中的 JSON.parse() 方法将 JSON 字符串解析成 JavaScript 对象,然后使用 Object.keys() 方法将对象中的键名换成一个数组。例如: ``` // 假设你有以下 JSON 数据 const jsonData = '{"1": {"name": "John", "age": 30}, "2": {"name": "Jane", "age": 25}}'; // 将 JSON 数据解析成 JavaScript 对象 const data = JSON.parse(jsonData); // 将对象中的键名换成一个数组 const keysArray = Object.keys(data); ``` 现在你有了一个数组,你可以在 Vue3 的模板中使用 v-for 指令来遍历数组并渲染每个元素。例如: ``` <template> <ul> <li v-for="key in keysArray" :key="key"> {{ data[key].name }} - {{ data[key].age }} </li> </ul> </template> <script> export default { data() { return { jsonData: '{"1": {"name": "John", "age": 30}, "2": {"name": "Jane", "age": 25}}' } }, computed: { data() { // 将 JSON 数据解析成 JavaScript 对象 return JSON.parse(this.jsonData); }, keysArray() { // 将对象中的键名换成一个数组 return Object.keys(this.data); } } } </script> ``` 在模板中,我们使用 v-for 指令遍历 keysArray 数组,并为每个元素渲染一个 li 标签。我们使用 :key 绑定元素的 key 属性,以便 Vue 可以跟踪每个元素的状态。在每个 li 标签中,我们使用双花括号语法绑定 data 对象中对应键名的 name 和 age 属性。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值