vue3自定义按钮点击变颜色实现（多选功能） |
您所在的位置：网站首页 › vue点击按钮变色 › vue3自定义按钮点击变颜色实现（多选功能） |
vue3自定义按钮点击变颜色实现（多选功能）
|
实现效果图： 默认选中第一个按钮，未选中按钮为粉色，点击时颜色变为红色 利用动态类名，当定义isChange数值和下标index相同时，赋予act类名，实现变色效果 按钮{{ index + 1 }} 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 }; }, }; .page { padding: 50px; display: flex; flex-wrap: wrap; } .btn { width: 60px; height: 30px; background-color: pink; margin: 10px; } .act { background-color: red; } |
【本文地址】
今日新闻 |
推荐新闻 |