vue遍历的数据点击之后相对的变色

最新推荐文章于 2022-12-01 10:45:17 发布

百事可口

最新推荐文章于 2022-12-01 10:45:17 发布

阅读量514

点赞数

分类专栏： vue 文章标签： vue.js

本文链接：https://blog.csdn.net/qq_38594056/article/details/114840523

版权

vue 专栏收录该内容

14 篇文章 1 订阅

订阅专栏

     <div
        v-for="(item, index) in musicType"
        :key="item.type"
        :class="index == currentKey ? 'isActive' : 'types' + item.type"
        style="margin-left: 45px;cursor: pointer;"
        @click="changeType(item.type, index)"
        type="text"
      >
        {{ item.name }}
      </div>

 data() {
    return {
      // 样式高亮
      currentKey: 0,
      //标签数据
      musicType: [
        { type: 0, name: "全部" },
        { type: 7, name: "华语" },
        { type: 96, name: "欧美" },
        { type: 16, name: "韩国" },
        { type: 8, name: "日本" },
      ],
      //上一次点击的分类(默认的是type-1)
      prevType: "types" + 0,
    };
  },
 changeType(typeId, index) {
      // console.log(typeId, index);
      this.currentKey = index;
      this.queryInfo.type = typeId;
      //赋值存储
      this.prevType = "types" + typeId;
      this.getNewMusic();
    },