vue中的map创建和使用

最新推荐文章于 2025-03-19 22:02:30 发布
最新推荐文章于 2025-03-19 22:02:30 发布
阅读量1.3w 收藏 7
点赞数 4
文章标签： java elementui vue.js javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/kdjfh/article/details/128646481
版权

1.vue中的map创建

        在data中定义我们的map :{}

         然后在create 中创建一个map;

 首先我遇到的情况是我需要存储好多组对应的数据，如果这时用array的话，会造成数组错乱，所以我选择键值对的方式，这样一个键对应一个值就不会再错乱了。我现在是一个节点对应一组人员，每次选择不同的节点需要选择不同的人员对应上。

这时我会先声明一个map，因为节点数据是唯一的，我就把节点作为键，值先设为空，

因为我的值是一个对象，所以我先创建了一个空对象。 此时的对象必须是临时对象，也就是每个键需要对应一个对象，要不然后边的对象会覆盖前边的。

candidate_ids是我将要塞人员值得参数，

这时当我们选完人时，首选获取到这个键 的值也就是myMap.get();通过这种方式可以获取到，然后把人员值赋给对象的参数，再把这个新的对象重新塞进去就可以了。 

下面是我选择了两个节点的情况，这就是我想要的效果

 

正在呼吸
关注
vue3-mindmap:开发中
04-09
vue3-mindmap（开发中） 相比更新了技术栈：Vue3、d3v6、Vite 目前打算对项目进行重构，解决一些老旧问题（图片生成、加载慢...） 在线演示： 安装 npm install vue3-mindmap PROPS Name Type Default Description v-model Data[] undefined 设置思维导图数据 x-gap Number 50 设置节点横向间隔 y-gap Number 18 设置节点纵向间隔 branch Number 4 设置连线的宽度 drag Boolean false 设置节点是否可拖拽 zoom Boolean false 是否可缩放、拖移 edit Boolean false 是否可编辑 center-btn Boolean false 是否显示居中按钮 fit-btn Boolean false 是否显示缩放按钮
bing Map 在vue项目中的使用详解
08-27
在 Vue 项目中使用 Bing Map 需要完成以下步骤： 1. 初始化地图：首先，需要在 HTML 文件中添加一个容器元素（例如 `<div id="myMap"></div>`），用于承载地图。 2. 引入 Bing Map 资源：在 JavaScript 文件中，...
vue中把获取的数据做成map，自定义主键
qq_43610925的博客
09-01 1971
2.map的使用（id可能是string或int两种情况，视情况而定）
vuex中四个map方法的使用
最新发布
qq_41273137的博客
03-19 954
/借助mapMutations生成对应的方法，方法中会调用commit去联系mutations(对象写法)//借助mapMutations生成对应的方法，方法中会调用commit去联系mutations(数组写法)//借助mapActions生成对应的方法，方法中会调用dispatch去联系actions(对象写法)//借助mapActions生成对应的方法，方法中会调用dispatch去联系actions(数组写法)//借助mapGetters生成计算属性，从getters中读取数据。
创建地图--vue
weixin_44293690的博客
08-02 550
创建地图--vue
【vue】Vue中的map()用法
qq_44727978的博客
04-18 6万+
前台数据处理。超详细的小白教程map()
vue遍历Map，Map在vue中的使用方法
热门推荐
weixin_38897313的博客
11-27 6万+
Map在vue中的使用方法： html：遍历的时候要遍历两遍 <template> <div class="course"> <div class=""> <div class="pt0 ctRow"> <ul class="ctNavbar"> ...
Vue--set和map
m0_67403188的博客
04-27 2334
1.set 2.map 含义：Javascript的对象 (Object)，本质上是键值对的集合(Hash结构)，但是传统上只能用字符串当作键。 ES6提供了Map数据结构，它类似于对象，也是键值对的集合，但是“键”的范围不限于字符串，各种类型的值（包括对象）都可以当作键。 Map的键实际上是跟内存地址绑定的，只要内存地址不一样，就视为两个键。 const m = new Map(); const o = {p : 'Hello World'}; m.set(o,'content'); document.w
vue使用map代替Aarry数组循环遍历的方法
10-15
因此，如果我们需要在Vue中使用Map，并希望它具备响应式特性，可以使用Vue.set或者this.$set方法来添加或修改Map对象。 例如，更新Map中的值： ```javascript Vue.set(this.indexMap, key, newValue); ``` 或者：...
vue 使用高德地图vue-amap组件过程解析
10-16
在本文中，我们将深入探讨如何在Vue项目中集成并使用高德地图的`vue-amap`组件。`vue-amap`是一个专为Vue.js设计的高德地图插件，它使得在Vue应用中添加地图功能变得简单易行。首先，我们需要安装这个组件，通过运行...
最全vue的vue-amap使用高德地图插件画多边形范围的示例代码
01-19
一、在vue-cli的框架下的main.js(或者main.ts)中引入高德插件，代码如下： import Vue from 'vue' import VueAMap from 'vue-amap' import ElementUI from 'element-ui' import App from './App.vue' import router...
一个基于Vuejs的地图
08-10
一个基于Vue.js的地图
element vue Array数组和Map对象的添加与删除操作
10-17
主要介绍了element vue Array数组和Map对象的添加与删除功能，本文给大家介绍的非常详细，具有一定的参考借鉴价值,需要的朋友可以参考下
vue中map()使用
qq_41438838的博客
09-07 3183
vue中map()使用
vue地图
weixin_43996061的博客
02-26 641
vue-baidu-map https://dafrok.github.io/vue-baidu-map/#/zh/bmaplib/marker-clusterer
利用 WeakMap 对 Vue 新建数组中的对象赋予 :key
weixin_33749131的博客
04-28 169
2019独角兽企业重金招聘Python工程师标准>>> ...
vue中map组件
weixin_30484739的博客
11-21 1987
分享一个比较好用的基于百度地图的vue组件。也有react版本的，可以自行选择。 分享链接：点击 转载于:https://www.cnblogs.com/yunnex-xw/p/9996600.html
Vue学习第25天——Vuex中的4个map方法的基本用法及案例练习
背心的博客
09-18 3807
VUEX中的mapState、mapGetters、mapActions和mapMutations详解及案例练习
vue .map 文件
weixin_33682719的博客
10-29 935
参数： productionSourceMap:false 这个改为false。去掉打包产生的map文件 map文件的作用：定位线上错误代码位置; 转载于:https://www.cnblogs.com/tongbiao/p/9869757.html
vue3中 map循环的使用
02-25
### Vue3 中使用 `map` 进行循环 在 Vue3 中，`map` 是一种强大的工具用于转换数组中的每一个元素并返回一个新的数组。这非常适合于创建基于现有数据的新列表或对象集合。 #### 基本语法 `array.map()` 接受一个回调函数作为参数，该回调函数会为原始数组中的每个元素执行一次，并构建由这些调用的结果组成的新数组[^2]。 ```javascript const newArray = array.map((currentValue, index, array) => { // 返回新值来构成新的数组 }); ``` #### 实际应用场景 假设有一个包含多个用户信息的对象数组，在模板渲染之前可能需要对某些字段做特定处理： ```html <template> <ul> <!-- 渲染经过映射后的用户名 --> <li v-for="(name, idx) in formattedNames" :key="idx">{{ name }}</li> </ul> </template> <script setup> import { ref } from 'vue'; // 定义初始的数据集 const users = [ { id: 1, firstName: "John", lastName: "Doe" }, { id: 2, firstName: "Jane", lastName: "Smith" } ]; // 使用 map 对名字进行格式化 const formattedNames = ref(users.map(user => `${user.firstName} ${user.lastName}`)); console.log(formattedNames.value); // ["John Doe", "Jane Smith"] </script> ``` 在这个例子中，通过 `map` 将用户的全名提取出来形成一个新的字符串数组，然后利用 `v-for` 指令将其展示在一个无序列表里[^1]。 #### 处理更复杂的情况 当面对更加复杂的业务逻辑时，比如不仅限于简单的属性组合而是涉及到更多计算或是异步操作的时候，可以在组件的方法内定义更为详细的映射过程： ```javascript methods: { async fetchUserDetails() { const detailedUsers = await Promise.all( this.users.map(async user => ({ ...user, fullName: `${user.firstName} ${user.lastName}`, avatarUrl: await getUserAvatarById(user.id), })) ); return detailedUsers; } } ``` 上述代码展示了如何结合 `Promise.all` 和 `async/await` 来并发获取额外的信息（如头像URL），并将它们附加到原有对象上再返回给视图层[^3]。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值