实现效果图： 默认选中第一个按钮，未选中按钮为粉色，点击时颜色变为红色
文章来源：https://www.toymoban.com/news/detail-804471.html
利用动态类名，当定义isChange数值和下标index相同时，赋予act类名，实现变色效果文章来源地址https://www.toymoban.com/news/detail-804471.html
<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>
到了这里，关于vue3自定义按钮点击变颜色实现（多选功能）的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
