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>