vue.js 点击不同的按钮，按钮相应背景颜色改变

最新推荐文章于 2024-06-30 11:06:07 发布

江清辞

最新推荐文章于 2024-06-30 11:06:07 发布

阅读量7.4k

点赞数 4

分类专栏：前端碰到的问题文章标签： vue.js

本文链接：https://blog.csdn.net/qq_41974250/article/details/109547725

版权

前端碰到的问题专栏收录该内容

15 篇文章 2 订阅

订阅专栏

<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;}