vue循环多选

最新推荐文章于 2024-05-16 02:53:35 发布

Nancy哇

最新推荐文章于 2024-05-16 02:53:35 发布

阅读量377

点赞数

文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/weixin_45957275/article/details/127213975

版权

vue循环进行多选标签

<template>
  <div>
    <div class="mid-main-single" v-for="(item, index) of 6" :key="index">
      <div
        class="collection"
        :class="{ active: itemindex.indexOf(index) > -1 }"
        @click="btn(item, index)"
      >
        <i class="el-icon-star-off"></i>
        喜欢
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      datas: [],
      itemindex: [],
    };
  },
  methods: {
    btn(item, index) {
      let arr = this.itemindex.indexOf(index);
      if (arr > -1) {
        this.itemindex.splice(arr, 1);
      } else {
        this.itemindex.push(index);
      }
    },
  },
  mounted() {},
};
</script>

<style>
.active {
  color: rgb(134, 39, 39);
}
</style>