vue中实现点击按钮（多个）添加样式并展示对应内容（模块）

最新推荐文章于 2024-06-19 09:42:28 发布

Dking222

最新推荐文章于 2024-06-19 09:42:28 发布

阅读量3.9k

点赞数

分类专栏： vue 实现的效果demo 文章标签： vue

本文链接：https://blog.csdn.net/weixin_47686269/article/details/108972278

版权

本文介绍在Vue中如何实现点击多个按钮，为选中按钮添加样式，并展示相应内容或模块。内容涵盖两种方式：一是切换不同模块，二是根据值显示相同模块。注意初始化时设置正确的默认值，避免显示不匹配的问题。样式修改可以在全局样式或组件内样式中完成。

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

vue中实现点击按钮（多个）添加样式并展示对应内容（模块）
类似tab栏切换
展示对应模块这里实现两种
一种是展示不同模块
第二种是根据值展示相同模块

<template>
  <div class="all">
    <div class="role-content">
      <div
        class="role-btn "
        @click="roleChecked0"
        :class="role0 == true ? 'active' : ''"
      >
        测试1
      </div>
      <div
        class="role-btn "
        @click="roleChecked1"
        :class="role1 == true ? 'active' : ''"
      >
        测试2
      </div>
      <div
        class="role-btn "
        @click="roleChecked2"