vue中的map创建和使用

最新推荐文章于 2024-07-11 09:08:29 发布
最新推荐文章于 2024-07-11 09:08:29 发布
阅读量1.2w 收藏 7
点赞数 4
文章标签： java elementui vue.js javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/kdjfh/article/details/128646481
版权

1.vue中的map创建

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

         然后在create 中创建一个map;

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

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

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

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

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

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

 

正在呼吸
关注
  • 4
    点赞
  • 踩
  • 7
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
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_41438838的博客
09-07 3082
vue中map()使用
vue中的map()
weixin_43337481的博客
04-07 3477
map() 方法返回一个新数组，数组中的元素为原始数组元素调用函数处理后的值。写不写return 都会返回一个数组，需要一个值来接收这个数组。every判断数组中每一个元素是否符合某个条件，返回一个布尔值。some判断数组中是否有元素符合某个条件，返回一个布尔值。filter筛选数组中满足条件的元素，返回筛选后的新数组。map() 方法按照原始数组元素顺序依次处理元素。也就是对一个数组进行一定的处理并返回处理的结果。注意： map() 不会改变原始数组。map遍历数组，返回处理后的新数组。
如何创建Map集合？
最新发布
破损的天堂鸟博客
07-11 778
TreeMap。
Vuejs学习八：map()函数
weixin_43844071的博客
11-02 8156
定义：map()函数定义在JS的array中，它返回一个新的数组，数组中的元素为原生数据用函数处理后的值。 map()不会对空数组进行检测；map()不会改变原始数组 let temp=[]; that.caseTagsList.map(item=>{ if(that.execParams.tagIdList.indexOf(item.id) < 0){ temp.push(item); } }); ...
创建地图--vue
weixin_44293690的博客
08-02 519
创建地图--vue
vue map的用法
m0_66557301的博客
03-24 1363
接口返回数据为： ['2018-8-14','2018-8-14'] 但我需要这样的数据格式： {data：“2018/08/14”,title:""}, {data：“2018/08/14”,title:""} 这样就能搞定是不是so easy let arr=res.data;? ? //?res.data是后台返回的list数组 let json={};? ? ? ? ?//定义空对象 let newArr=arr.map(val=>{? ? ? ? ? ? ? ? ? ?
【vue】Vue中的map()用法
热门推荐
qq_44727978的博客
04-18 5万+
前台数据处理。超详细的小白教程map()
vue中map组件
weixin_30484739的博客
11-21 1963
分享一个比较好用的基于百度地图的vue组件。也有react版本的，可以自行选择。 分享链接：点击 转载于:https://www.cnblogs.com/yunnex-xw/p/9996600.html
vue 使用高德地图vue-amap组件过程解析
10-16
在本文中，我们将深入探讨如何在Vue项目中集成并使用高德地图的`vue-amap`组件。`vue-amap`是一个专为Vue.js设计的高德地图插件，它使得在Vue应用中添加地图功能变得简单易行。首先，我们需要安装这个组件，通过运行...
element vue Array数组和Map对象的添加与删除操作
10-17
主要介绍了element vue Array数组和Map对象的添加与删除功能，本文给大家介绍的非常详细，具有一定的参考借鉴价值,需要的朋友可以参考下
最全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...
vue使用map代替Aarry数组循环遍历的方法
10-15
因此，如果我们需要在Vue中使用Map，并希望它具备响应式特性，可以使用Vue.set或者this.$set方法来添加或修改Map对象。 例如，更新Map中的值： ```javascript Vue.set(this.indexMap, key, newValue); ``` 或者：...
vuex中的四个map方法的使用
见证自己学习,成长的记录
07-07 4941
用于帮助我们映射state中的数据为计算属性//借助mapState生成计算属性：sum、school、subject（对象写法）//借助mapState生成计算属性：sum、school、subject（数组写法）},用于帮助我们映射getters中的数据为计算属性//借助mapGetters生成计算属性：bigSum（对象写法）//借助mapGetters生成计算属性：bigSum（数组写法）},3用于帮助我们生成与actions对话的方法，即：包含的函数methods:{
Vue学习第25天——Vuex中的4个map方法的基本用法及案例练习
背心的博客
09-18 3644
VUEX中的mapState、mapGetters、mapActions和mapMutations详解及案例练习
Vue--set和map
m0_67403188的博客
04-27 2116
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对象使用总结
静心园
04-17 1万+
vue中Map对象使用总结 一般情况下List已经可以处理大部分情况下的业务，但在特殊的场景下，使用map可以节省很多的代码量，但在实践过程中如果套用list的方法去使用则会遇到很多的坑，这里对在Vue中正确使用map对象做一个整理，顺便吐槽下现在网上的文章真是质量低下，很多连js中list和map是啥就可以出来瞎写真的是误人子弟。 map的基本使用 //1.新建 var mapObject=new Map() //2.添加 mapObject.set(key,value) //如果对应的key已经存在，则
vue baidu map怎么离线使用
07-20
### 回答1： Vue Baidu Map是一个基于Vue.js的百度地图组件库，它默认是在线获取地图数据的。如果要实现离线使用，可以按照以下步骤操作： 1. 获取百度地图的离线地图数据：可以通过百度地图官网下载离线地图数据包，选择你需要的地区进行下载。这些数据包包含地图瓦片数据和必要的资源文件。 2. 配置离线地图数据路径：在Vue Baidu Map组件中，有一个叫做`resource`的属性，可以用来配置地图资源路径。你可以将下载的离线地图数据放置在某个目录下，然后将该目录的路径配置到`resource`属性中。 3. 离线地图数据加载：在Vue Baidu Map中，有一个叫做`offline`的属性，可以用来指定是否使用离线地图数据。将`offline`属性设置为`true`，组件就会根据配置的离线地图数据路径加载离线地图数据。 4. 渲染地图：组件会根据离线地图数据进行地图渲染，你可以按照需要在Vue组件中使用它。 需要注意的是，离线地图数据包的大小较大，下载和存储可能需要较长时间和大量的存储空间。此外，离线地图数据在使用前需要进行事先下载和配置，以确保正确加载地图。 总而言之，离线使用Vue Baidu Map需要下载百度地图的离线地图数据包，并在Vue Baidu Map组件中配置离线地图的路径和使用离线地图的设置，以实现离线地图的使用。 ### 回答2： Vue百度地图可以通过以下步骤实现离线使用： 1. 下载地图数据：首先，可以从百度地图开放平台下载离线地图数据。下载的数据文件可以包含特定区域的地图瓦片数据和离线导航数据。 2. 导入地图数据：将下载的地图数据文件导入到Vue项目中，在项目的静态资源文件夹中创建一个新的文件夹，将地图数据文件放入其中。 3. 配置地图组件：在Vue组件中使用百度地图组件时，可以通过设置地图初始化时的参数来指定使用离线地图数据。设置地图的center属性为指定区域的经纬度坐标，设置zoom属性为初始缩放级别。 4. 加载离线地图数据：在组件的`mounted`生命周期中，通过调用百度地图JavaScript API的`BMap.Offline.getOfflineMapList()`方法，加载离线地图数据。这个方法可以返回所有已下载的离线地图数据列表。 5. 使用离线地图：在加载离线地图数据后，可以通过设置地图的`BMap.Map.setMapType()`方法来设置地图的类型为离线地图。这样，当地图加载完成后，将显示离线地图数据而非在线地图数据。 需要注意的是，在使用离线地图数据时，需要保证您已遵守百度地图开放平台的政策和规定，确保合法使用地图数据。另外，还要注意地图数据的更新和管理，随着时间的推移，离线地图数据可能会过时，需要定期更新。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值