vue2.0tabl切换效果以及两个class共存

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>