使用vue v-for遍历map

一时失言乱红尘 2022-09-09 11:53 787阅读 0赞

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

<html lang="en">
    
    <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>

效果：  
![在这里插入图片描述][watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBAbGVzbGllZmlzaA_size_20_color_FFFFFF_t_70_g_se_x_16]

[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBAbGVzbGllZmlzaA_size_20_color_FFFFFF_t_70_g_se_x_16]: /images/20220829/201169778bf142c1a53e018c14831ce4.png