网站备案域名更改,建设银行投诉网站首页,蜂鸟摄影网,广告制作服务方案例如我有一个这样的组件#xff0c;我希望在点击组件之后由蓝色变成橙色 先把原来的代码附上(简化掉了叉号#xff09;#xff1a;
div v-for(item, index) in words :keyindex classscrollbar-demo-itemspan{{ item …例如我有一个这样的组件我希望在点击组件之后由蓝色变成橙色 先把原来的代码附上(简化掉了叉号
div v-for(item, index) in words :keyindex classscrollbar-demo-itemspan{{ item }}/span
/div
修改后的代码(简化掉了叉号
template
div v-for(item, index) in words clickchangeColor :keyindex :class[checked?scrollbar-demo-item1:scrollbar-demo-item]span{{ item }}/span
/div
/templatescript
export default{data() {return {checked: false};},method(){changeColor(){this.checked !this.checked; // 切换 checked 变量的值}},}
}
/script
style
.scrollbar-demo-item {flex-shrink: 0;display: flex;align-items: center;justify-content: center;width: 100px;height: 50px;margin: 10px;text-align: center;border-radius: 4px;background:rgb(237,245,255);color:rgb(84,156,253);
}
.scrollbar-demo-item1 {flex-shrink: 0;display: flex;align-items: center;justify-content: center;width: 100px;height: 50px;margin: 10px;text-align: center;border-radius: 4px;background:rgb(255, 218, 176);color:rgb(255, 153, 0);
}
/style
