使用vue v-for遍历map

关键点在于(value, key) in map,value在前,key在后

<html>
 
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Map vue</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
</head>
 
<body>
    <div id="app">
        // value作为值
        <div style="border: 1px solid red; height: 30px;" 
        v-for="(value, key) in myMap" 
        :key="key">{{value}}</div>
         
        // value[0]作为值
        <div style="border: 1px solid blue; height: 30px;" 
        v-for="(value, key) in myMap" 
        :key="key">{{value[0]}}</div>
         
        // value[1]作为值
        <div style="border: 1px solid black; height: 30px;" 
        v-for="(value, key) in myMap" 
        :key="key">{{value[1]}}</div>
    </div>
 
    <script>
        let map = new Map([['a', 123], ['b', 456], ['c', 789]]); // 构造一个map
        let app = new Vue({
            el: '#app',
            data: {
                myMap: map
            }
        })
    </script>
 
</body>
 
</html>

  • 3
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Vue2中,使用`v-for`遍历`Map`可以通过以下方式进行操作。首先,需要将`Map`转换为一个数组才能进行遍历。可以使用`Array.from()`或者``来进行转换。然后,使用`v-for`指令来进行循环遍历,在循环过程中可以使用`(value, key)`语法来获取`Map`中的键值对。例如,如果`map`是一个`Map`对象,可以这样遍历它: ``` <template> <div> <div v-for="(value, key) in Array.from(map)" :key="key"> {{ key }}: {{ value }} </div> </div> </template> <script> export default { data() { return { map: new Map([ ['key1', 'value1'], ['key2', 'value2'], ['key3', 'value3'] ]) } } } </script> ``` 上面的代码将会遍历`map`中的所有键值对,并在页面中显示出来。每个键值对都可以通过`value`和`key`来访问。<span class="em">1</span><span class="em">2</span><span class="em">3</span> #### 引用[.reference_title] - *1* *2* [v-for遍历Map分析](https://blog.csdn.net/attack_breast/article/details/120748912)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_1"}}] [.reference_item style="max-width: 50%"] - *3* [Vue使用v-for遍历map](https://blog.csdn.net/m0_54866636/article/details/123704386)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_1"}}] [.reference_item style="max-width: 50%"] [ .reference_list ]

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值