vue遍历 map

最新推荐文章于 2022-08-26 23:14:29 发布

白鹿原的白

最新推荐文章于 2022-08-26 23:14:29 发布

阅读量3.8k

点赞数

分类专栏： Demo

本文链接：https://blog.youkuaiyun.com/weixin_45759287/article/details/106415683

版权

Demo 专栏收录该内容

3 篇文章

订阅专栏

本文介绍如何在 Vue.js 应用中遍历 Map 数据结构，通过实例代码展示具体的遍历方法，帮助开发者更好地理解和使用 Vue 与 Map 的结合。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

测试 Demo

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="vuejs-2.5.16.js"></script>
    <script src="axios-0.18.0.js"></script>
</head>
<!-- 引入样式 -->
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
<!-- 引入组件库 -->
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<body>
<div id="app">
   
        <!--<template>-->
            <!--<el-select v-model="value" placeholder="请选择">-->
                <!--<el-option-->
                <!--遍历数组使用-->
                        <!--v-for="item in list2"-->
                        <!--:key="item"-->
                        <!--:label="item"-->
                        <!--:value="item">-->
                <!--</el-option>-->
            <!--</el-select>-->
        <!--</template>-->
    <!--</div>-->

    <!--<div>-->

        <template>
        <!--遍历map-->
            <el-select v-model="value" placeholder="请选择">
                <el-option
                        v-for="index in map"
                        :key="index"
                        :label="index"
                        :value="index">
                </el-option>
            </el-select>
        </template>
        <div>
           {{value}}
        </div>
</div>
</body>
<script>
    new Vue({
        el:"#app",
        data:{
            value: '',
            list2:["12","233","222","32323","212"],
            map:{name:'李四',age:'12',address:"北京"}
        },
    });

</script>
</html>

效果：
在这里插入图片描述