vue2.0tabl切换效果以及两个class共存-优快云博客

本文介绍Vue.js中实现Tab切换效果的方法，通过v-for遍历数据并结合@click和:class指令，实现动态样式绑定及事件处理。同时，讲解了如何在组件中使用动态Class和静态Class。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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和：class共存

在vue中。class和：class两个是可以共同存在的！所以我们只需要将静态的class按照正常绑定，带条件的class使用:class绑定即可

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

两个动态class的使用

.若要绑定多个class，需要逗号隔开就行：（这里的activeTwo加不加引号都可以，也一样都能渲染，如下）

<div class="wrap" v-bind:class="{ wrap2: istrue, 'wrap3': isError }"></div>

js部分：判断是否绑定对应class

data() {
    return {
      isActive: true,
      hasError: true
    };
  }