vue 实现tab菜单切换

1、目标:

实现切换tab菜单,激活状态,按钮高亮,显示对应的菜单内容

2、实现

javascript 复制代码
<template>
  <div class="tan_menu">
    <ul class="container">
      <li
        class="item"
        v-for="item in tab_menu"
        :key="item.type"
        :class="{ active: current_menu === item.type }"
        @click="selectMenu(item.type)"
      >
        {{ item.label }}
      </li>
      <!-- <li class="item" :class="{ actice: current_menu === 'login' }">登录</li>
      <li class="item" :class="{ actice: current_menu === 'register' }">
        注册
      </li> -->
    </ul>
    <template v-if="current_menu === 'login'">
      <div class="login">这是--登录--内容</div>
    </template>
    <template v-if="current_menu === 'register'">
      <div class="register">这是--注册--内容</div>
    </template>
  </div>
</template>

<script>
export default {
  name: "TabMenu",
  data() {
    return {
      tab_menu: [
        { type: "login", label: "登录" },
        { type: "register", label: "注册" },
      ],
      current_menu: "login",
    };
  },
  methods: {
    selectMenu(type) {
      this.current_menu = type;
    },
  },
};
</script>

<style lang="less" scoped>
// 清除内外边距
* {
  margin: 0;
  padding: 0;
}
.tan_menu {
  // margin: 20px 20px 0;
  .container {
    list-style: none;
    margin: 100px auto;
    width: 200px;
    height: 40px;
    line-height: 40px;
    text-align: center;
    display: flex;
    justify-content: space-around;
    background-color: skyblue;
    .item {
      width: 100px;
      cursor: pointer;
      &.active {
        background-color: pink;
        color: #fff;
      }
    }
  }
  .login,
  .register {
    width: 300px;
    height: 100px;
    line-height: 100px;
    text-align: center;
    border: 2px solid pink;
    margin: 20px auto;
  }
}
</style>

效果:

相关推荐
小小爱大王10 小时前
AI 编码效率提升 10 倍的秘密:Prompt 工程 + 工具链集成实战
java·javascript·人工智能
半生过往10 小时前
2025 前端动效实战指南:Vue Bits & React Bits 深度拆解(功能 / 复用 / 高频问题处理)
前端·vue.js·react.js
程序员包打听10 小时前
Vitest 4.0 重磅发布:Browser Mode 正式稳定,前端测试进入新纪元
前端
BumBle10 小时前
UniApp 多页面编译优化:编译时间从10分钟到1分钟
前端
星链引擎10 小时前
大语言模型的技术突破与稳定 API 生态的构建
前端
还是大剑师兰特10 小时前
TypeScript 面试题及详细答案 100题 (71-80)-- 模块与命名空间
前端·javascript·typescript
BumBle10 小时前
使用 SortableJS 实现vue3 + Element Plus 表格拖拽排序
前端·vue.js·element
玉宇夕落10 小时前
HTML5 音乐敲击乐静态界面
前端
海在掘金6112710 小时前
告别"拼写错误":TS如何让你的代码"字字精准"
前端
用户479492835691510 小时前
什么是XSS攻击,怎么预防,一篇文章带你搞清楚
前端·javascript·安全