使用class绑定来自定义标签页

最新推荐文章于 2022-01-13 11:44:06 发布

Hero in need

最新推荐文章于 2022-01-13 11:44:06 发布

阅读量190

点赞数

分类专栏： WEB 文章标签： web css class html

本文链接：https://blog.csdn.net/qq_43318935/article/details/108932165

版权

本文介绍如何利用class绑定和button元素创建个性化的标签页。通过调整样式，可以实现一个简洁的标签页效果。

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

使用class绑定来自定义标签页

使用class绑定加上button按钮来自定义一个简单的标签页

  <button :class="radio==1 ?'tableChange':'table'" @click="getEchart(1)">空气质量</button>
  <button :class="radio==2 ?'tableChange':'table'" @click="getEchart(2)">温度</button>
  <button :class="radio==3 ?'tableChange':'table'" @click="getEchart(3)">降水量</button>
  <button :class="radio==4 ?'tableChange':'table'" @click="getEchart(4)">紫外线</button>

style里面的代码

.tableChange{
   width:80px;
   height:50px;
   background: rgba(135,206,250, 1);
   color: #4682B4;
   border: none;
   font-weight: bold;
   outline:none;
   cursor: pointer;
   margin: