vue选中之后的变颜色

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

小星星o

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

阅读量618

点赞数

文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/m0_74608954/article/details/132617335

版权

本文描述了一个使用Vue.js实现的仓库管理系统的动态切换功能，通过`.active`和`.inactive`类设置选中和未选中按钮的背景颜色。用户可以通过点击不同仓库名称来切换显示内容。

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

<tabs class="tabsc" tab-position="top">
		  <span v-for="i in warehouses" @click="tabId(i.id)"
		    :key="i.id">
		    <span :class="{'active': activeWarehouse === i.id, 'inactive': activeWarehouse !== i.id}" slot="label">
		      <i class="tabName"></i> {{ i.warehouseName }}
		    </span>
		  </span>
		</tabs>


.active {
  background-color: red; /* 设置选中按钮的颜色 */
}

.inactive {
  background-color: blue; /* 设置未选中按钮的颜色 */
}