javascript - Vue 如何从两个 JSON 中遍历数据, 根据相同的 Key 为 DOM 赋值?
黄舟
黄舟 2017-05-18 11:02:34
0
2
633

现有数据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" )与数据匹配, 做到如下示例?

  • 驱逐舰

  • 航空母舰

  • 主力舰

  • 巡洋舰

谢谢!

黄舟
黄舟

人生最曼妙的风景,竟是内心的淡定与从容!

全部回复(2)
伊谢尔伦

两个数组foreach循环,组成一个新的数组来渲染到页面

或者用计算属性

巴扎黑

雷雷

...

热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板