两个按钮切换的样式

最新推荐文章于 2024-07-22 23:55:03 发布

靓靓的圆子

最新推荐文章于 2024-07-22 23:55:03 发布

阅读量463

点赞数

分类专栏： css样式问题文章标签： html css html5

本文链接：https://blog.csdn.net/weixin_45646663/article/details/119931640

版权

css样式问题专栏收录该内容

22 篇文章 1 订阅

订阅专栏

这篇博客详细介绍了如何在前端实现全选和反选功能，使用了Vue.js框架，通过activeCode状态切换按钮样式并控制选中状态。代码中包含HTML和CSS，展示了如何定义和应用类名来改变按钮的样式，并通过JavaScript实现全选和反选的逻辑。

摘要由CSDN通过智能技术生成

<span :class="activeCode == 1 ? 'tableBottomActive2' : 'tableBottomActive3'" @click="selectAll(1)">
 全选
</span>
<span :class="activeCode == 2 ? 'tableBottomActive2' : 'tableBottomActive3'" @click="selectAll(2)">
 反选
</span>

export default {
    data(){
      return {
        activeCode:1,
      }
    },
},
selectAll:function(active){        
   this.activeCode = active
 }

.tableBottomActive2 {
    display: inline-block;
    text-align: center;
    line-height: 34px;
    cursor: pointer;
    width: 80px;
    height: 34px;
    background: #EDF2FC;
    border: 1px solid #2B60F8;
    color: #2B60F8;
    margin-left: -4px;
  }
  .tableBottomActive3 {
    display: inline-block;
    text-align: center;
    line-height: 34px;
    cursor: pointer;
    width: 80px;
    height: 34px;
    border: 1px solid #AFC3FA;
    margin-left: -4px;
  }