tab切换效果

[code] <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绑定即可

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