工作中遇到的一些問題及解決方法（積少成多）

1.vue不循環tab切換

很多時候會遇到點擊tab切換下面內容的情況，最常見的情況是這種：  https://blog.csdn.net/amanda_wmy/article/details/79015061

下面就是我遇到的不循環的時候點擊tab切換下方內容：

<div class="center-nav">
    <span :class="{'bule':actives == 1}" @click="clickTab(1)">預定</span>
    <span :class="{'bule':actives == 2}" @click="clickTab(2)">工作</span>
    <span :class="{'bule':actives == 3}" @click="clickTab(3)">權限</span>
    <span :class="{'bule':actives == 4}" @click="clickTab(4)">規劃</span>
    <span :class="{'bule':actives == 5}" @click="clickTab(5)">搜索</span>
</div>

js寫法：

clickTab(index){
  this.actives = index;
},

<div class="nav-content-box" v-if="this.actives === 1"></div>
<div class="nav-content-box" v-if="this.actives === 2"></div>
<div class="nav-content-box" v-if="this.actives === 3"></div>
<div class="nav-content-box" v-if="this.actives === 4"></div>
<div class="nav-content-box" v-if="this.actives === 5"></div>

2.在工作中使用百度地圖

html中這樣編寫，定義一個名爲allmap的id

 <div id="allmap"></div>

再在mounted中掛載函數

    //創建和初始化地圖函數：
    function initMap() {
      createMap();//創建地圖
      setMapEvent();//設置地圖事件
      addMapOverlay();//向地圖添加覆蓋物
    }

function createMap() {
   map = new BMap.Map("allmap");
   //信息窗口定位在整塊地圖的中間
   map.centerAndZoom(new BMap.Point(91.1928937365, 29.5414289270), 16);
 }

設置地圖事件
function setMapEvent() {
      map.enableScrollWheelZoom();
      map.enableKeyboard();
      map.enableDragging();
      map.enableDoubleClickZoom()
    }

function addMapOverlay() {
      var markers = [
        { content: "", title: "你所想要填寫的地址", imageOffset: { width: 0, height: 3 }, position: { lat: 29.5414289270, lng: 91.1928937365 } }.
      ];
      for (var index = 0; index < markers.length; index++) {
        var point = new BMap.Point(markers[index].position.lng, markers[index].position.lat);
        var marker = new BMap.Marker(point, {          icon: new BMap.Icon("http://api.map.baidu.com/lbsapi/createmap/images/icon.png", new BMap.Size(20, 25), {
            imageOffset: new BMap.Size(markers[index].imageOffset.width, markers[index].imageOffset.height)
          })        });
        var opts = {
          width: 200,
          title: markers[index].title,
          enableMessage: true
        };
        var infoWindow = new BMap.InfoWindow(markers[index].content, opts);
        addClickHandler(marker, infoWindow);
        map.addOverlay(marker);
      };
    }
    var map;
    initMap();
    setTimeout(() => {
      document.getElementsByClassName('BMap_Marker')[0].click()
    }, 500)