vue.js 点击不同的按钮,按钮相应背景颜色改变
<button @click="buttonClick(1)" :class="buttonIndex == 1?'bgcolor':''">月</button><button @click="buttonClick(2)" :class="buttonIndex == 2?'bgcolor':''">季</button><button @cl
·
<button @click="buttonClick(1)" :class="buttonIndex == 1?'bgcolor':''">月</button>
<button @click="buttonClick(2)" :class="buttonIndex == 2?'bgcolor':''">季</button>
<button @click="buttonClick(3)" :class="buttonIndex == 3?'bgcolor':''">年</button>
data(){
buttonIndex:1,
}
methods:{
buttonClick(buttonIndex){
this.buttonIndex = buttonIndex
},
}
.bgcolor {
background-color: #0066FF;
border: 0;
outline: none;
}
button {
padding:0.2rem 1.2rem ;
background: #4E6FFF;
border: 0;
color: white;
border-radius:0 ;
}
button:focus{outline:0;}
更多推荐
已为社区贡献3条内容
所有评论(0)