想要的效果:
var marker1 = new BMap.Marker(new BMap.Point(res.data.data[0].gpsX, res.data.data[0].gpsY),{icon:myIcon});
var marker2 = new BMap.Marker(new BMap.Point(res.data.data[1].gpsX, res.data.data[1].gpsY),{icon:myIcon2});
var marker3 = new BMap.Marker(new BMap.Point(res.data.data[2].gpsX, res.data.data[2].gpsY),{icon:myIcon2});
var marker4 = new BMap.Marker(new BMap.Point(res.data.data[3].gpsX, res.data.data[3].gpsY),{icon:myIcon});
map.addOverlay(marker1);
map.addOverlay(marker2);
map.addOverlay(marker3);
map.addOverlay(marker4);
for循环实现:
this.$axios({
url: "/api/device/jiankongDevice/getJiankongDeviceAllList",
method: "get",
headers: {
"X-Requested-With": "XMLHttpRequest",
platform: 0,
token: localStorage.getItem("token"),
params: {},
}).then((res) => {
console.log(res);
for(var i in res.data.data){
var marker = 'marker'+i
marker=new BMap.Marker(new BMap.Point(res.data.data[i].gpsX, res.data.data[i].gpsY),{icon:myIcon});
map.addOverlay(marker);
如果想给生成的每个变量添加事件,则需要用到事件监听addEventListener(),并且需要用闭包,具体可以看我下篇文章
一个title 处 可能有 一个或多个按钮, 按钮对应不同的响应事件
二. 思路 :
按钮个数 根据传入的数据length 来循环渲染, 每条数据对应的事件名称 通过动态绑定
三. 封装组件
1. 视图层面
2. 代码部分
2.1 结构部分
<!-- 多个button组件-->
<titleAddBtn addBtnList=addBtnList clkCallBk=listenCall></titleAddBtn>
2.2 JS部分
2.2.1 引入组件
import titleAddBtn from '@/components/titleAddBtn
VUE中v-for循环根据index来给循环的每个部分添加不同的id名
<div v-for="(item,index) in courses">
<div :id="course(index)">
<span>{{ item.name }}</span>
<span>{{ item.teacher }}</spa...
let totalPrice = 0
for (let i = 0; i < this.books.length; i++) {
totalPrice += this.books[i].price * this.books[i].count
第二种for in 循坏,in对应的是数组对象名字,i 也是数组的序号
let totalPrice = 0
<meta charset="utf-8">
<title>Vue动态添加变量给变量赋值</title>
<script src="https://cdn.staticfile.org/vue/2.4.2/vue.min.js"></script>
</head>
<div id="app">
比如在data中声明的show1、show2、show3、show4,会有场景使用时是showX需要
需要用到一个变量去赋值1、2、3、4…
let index = 1/2/3/4
this[`show${index}`]
前些天写Vue项目遇见一个很有意思问题:将一个数据(类型是对象)赋值给一个变量,当我去改变这个变量的时候,给它赋值的数据也跟着变化了,当我去改变数据时,变量也跟着变了,这让我想起了js中的浅复制和深复制,为验证,将对象(引用类型)改成字符窜(基本数据类型),果然,这个问题就不见了。
在js中有两种数据类型
(1) 基本数据类型:number、string、boolean、null、undefine...