网站出现风险如何处理,WordPress验证问题,创业网站模板,php cms网站实现效果图#xff1a; 默认选中第一个按钮#xff0c;未选中按钮为粉色#xff0c;点击时颜色变为红色
利用动态类名#xff0c;当定义isChange数值和下标index相同时#xff0c;赋予act类名#xff0c;实现变色效果
templatediv classpage 默认选中第一个按钮未选中按钮为粉色点击时颜色变为红色
利用动态类名当定义isChange数值和下标index相同时赋予act类名实现变色效果
templatediv classpagediv classbtns v-for(item, index) in 6 :keyindexdivclassbtn:class{ act: isChange.includes(index) }clickchange(index)按钮{{ index 1 }}/div/div/div
/templatescript
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 };},
};
/scriptstyle
.page {padding: 50px;display: flex;flex-wrap: wrap;
}.btn {width: 60px;height: 30px;background-color: pink;margin: 10px;
}.act {background-color: red;
}
/style
