vue3自定义按钮点击变颜色实现（多选功能）

H@Z*rTE|i2024-01-19 9:21

实现效果图：默认选中第一个按钮，未选中按钮为粉色，点击时颜色变为红色

利用动态类名，当定义isChange数值和下标index相同时，赋予act类名，实现变色效果

<template>
  <div class="page">
    <div class="btns" v-for="(item, index) in 6" :key="index">
      <div
        class="btn"
        :class="{ act: isChange.includes(index) }"
        @click="change(index)"
      >
        按钮{{ index + 1 }}
      </div>
    </div>
  </div>
</template>

<script>
import { ref } from 'vue';

export default {
  setup() {
    const isChange = ref([]);
    const change = (index) => {
      if (isChange.value.includes(index)) {
        // 如果按钮已经被选中，则移除该按钮的索引值
        isChange.value = isChange.value.filter((item) => item !== index);
      } else {
        // 如果按钮未被选中，则添加该按钮的索引值
        isChange.value.push(index);
      }
    };

    return { isChange, change };
  },
};
</script>

<style>
.page {
  padding: 50px;
  display: flex;
  flex-wrap: wrap;
}

.btn {
  width: 60px;
  height: 30px;
  background-color: pink;
  margin: 10px;
}

.act {
  background-color: red;
}
</style>