button根据时间不同按钮切换高亮

xiaoming_0208

已于 2023-09-13 11:40:44 修改

阅读量126

点赞数

文章标签： java 服务器前端

于 2023-04-28 13:53:08 首次发布

本文链接：https://blog.csdn.net/xiaoming4965/article/details/130424764

版权

 <button @click="showHistory" :class="activeColor-1 ? ' actives':'actives1'">历史图表</button>
 <button @click="showRealtime" :class="activeColor-2 ? 'actives':'actives1'">实时图</button>

//变量
   activeColor-1:true,
   activeColor-2:false,

//方法中事件

    //历史图表
    showHistory() {
          this.activeColor-1 = true;
          this.activeColor-2 = false;
    }

  //实时图表
    showRealtime() {
      this.activeColor-1 = false;
      this.activeColor-2 = true;

    },

//css样式
.actives {
  width: 80px;
  height: 30px;
  line-height: 30px;
  margin-left: 30px;
  border: none;
   background-color: #0383a7;
  box-shadow: 0 0 1px 0px #0383a7;
   border-radius: 10px;
   color: #fff;
   margin-bottom: 20px;
}
.actives1 {
  width: 80px;
  height: 30px;
  line-height: 30px;
  border: none;
   margin-left: 30px;
  background-color: #7e7171;
  border-radius: 10px;
  color: rgb(235, 222, 222);
  margin-left:30px;
}