tab切換效果

 <ul class="fr">
     <li
        v-for="(plantItem ,index) in plantList"
        :class="{clickStyle:echarIndex1==index}"
        @click="echarIndex1=index,tabChange(plantItem.plantName)"
      >{{plantItem.plantName}}</li>
      </ul>
</ul>

<script>
export default {
  data() {
    return {
      //地域統計右側內容
      plantList: [
        { plantName: "年積溫量" },{ plantName: "年降雨量" },{ plantName: "年均日照" }
      ],
      echarIndex1: 0, 
    };
  },

  methods: {
    tabChange(index) {
      alert(index); //儲存的為點選時候的html
    },
  }
};
</script>
 

 v-for指令

用於遍歷json陣列，v-for="(plantItem ,index) in plantList" 這個的話就是帶下標的遍歷，v-for="plantItem in plantList“這種就是隻遍歷json內容；

：class

  :class是 “v-bind:class”的簡寫， :class="{clickStyle:echarIndex1==index}"就是帶條件的class繫結，“clickStyle”為class名稱，繫結條件為 “echarIndex1==index”，預設在剛開始的時候在js裡面給它賦值為0；所以預設下標為0的元素選中，

 @click

 @click為“v-on:click”的簡寫， @click="echarIndex1=index,tabChange(plantItem.plantName)"  中“echarIndex1=index”就是給“echarIndex1”賦值，然後後面的“tabChange（plantItem.plantName）”就是繫結事件，講當前點選的內容當引數傳過去，

兩個class共存

在vue中。class和：class兩個是可以共同存在的！ 所以我們只需要將靜態的class按照正常繫結，帶條件的class使用:class繫結即可

<span class="cursor" :class="{clickBor:titleIndex == index}" ></span>