javascript - Vue 如何从两个 JSON 中遍历数据, 根据相同的 Key 为 DOM 赋值?
本文介绍了javascript - Vue 如何从两个 JSON 中遍历数据, 根据相同的 Key 为 DOM 赋值?的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
问 题
现有数据1 shipTypes
{
"Destroyer": "驅逐艦",
"AirCarrier": "航空母艦",
"Battleship": "主力艦",
"Cruiser": "巡洋艦"
}
和数据2 shipTypeImages
{
"Destroyer": {
"image": "http://glossary-asia-static.gcdn.co/icons/wows/current/vehicle/types/Destroyer/normal.png",
},
"AirCarrier": {
"image": "http://glossary-asia-static.gcdn.co/icons/wows/current/vehicle/types/AirCarrier/normal.png",
},
"Battleship": {
"image": "http://glossary-asia-static.gcdn.co/icons/wows/current/vehicle/types/Battleship/normal.png",
},
"Cruiser": {
"image": "http://glossary-asia-static.gcdn.co/icons/wows/current/vehicle/types/Cruiser/normal.png",
}
}
Vue DOM 结构(pug 语法)
ul
li
img {{shipTypeImages.image}}
span {{shipTypes.value}}
我如何做到两个数据的 Key 值(如 "Destroyer" )与数据匹配, 做到如下示例?
驅逐艦
航空母艦
主力艦
巡洋艦
谢谢!
解决方案
两个数组foreach循环,组成一个新的数组来渲染到页面
或者用计算属性
这篇关于javascript - Vue 如何从两个 JSON 中遍历数据, 根据相同的 Key 为 DOM 赋值?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文