Vue 自定义菜单、tabBar效果

1、HTML
html 复制代码
<template>
  <div class="test">
    <!-- 菜单 -->
    <ul>
      <li
        v-for="item in menuList"
        :key="item.id"
        :class="isActive == item.id ? 'isActive' : ''"
        @click="clickMenu(item.id)">
        <span>{{ item.label }}</span>
      </li>
    </ul>

    <!-- 内容 -->
    <div>
      <router-view />
    </div>
  </div>
</template>
2、Script
javascript 复制代码
<script>
export default {
  name: "",
  components: {},
  props: {},
  data() {
    return {
      menuList: [
        {
          id: 1,
          label: "首页",
          path: "/home",
        },
        {
          id: 2,
          label: "分类",
          path: "/home",
        },
        {
          id: 3,
          label: "商城",
          path: "/home",
        },
        {
          id: 4,
          label: "推荐",
          path: "/home",
        },
        {
          id: 5,
          label: "喜欢",
          path: "/home",
        },
      ],

      isActive: 1, // 选中id,默认选中id为1的菜单
    };
  },
  computed: {},
  created() {},
  mounted() {},
  methods: {
    clickMenu(id) {
      this.isActive = id;
    },
  },
};
</script>
3、Css
css 复制代码
<style lang="less" scoped>
.test {
  width: 100%;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;

  ul {
    width: 100%;
    height: 30px;
    display: flex;
    justify-content: center;
    align-items: center;

    li {
      width: 6%;
      height: 100%;
      margin: 0px 10px;
      border: 1px solid #24724f;
      display: flex;
      justify-content: center;
      align-items: center;
      cursor: pointer;
      font-size: 14px;

      // hover样式
      &:hover {
        background-color: #24724f;
        color: #fff;
      }
    }

    // 选中样式
    .isActive {
      background-color: #24724f;
      color: #fff;
    }
  }
}
</style>
相关推荐
老虎0627几秒前
JavaWeb(苍穹外卖)--学习笔记04(前端:HTML,CSS,JavaScript)
前端·javascript·css·笔记·学习·html
灿灿1213815 分钟前
CSS 文字浮雕效果:巧用 text-shadow 实现 3D 立体文字
前端·css
烛阴32 分钟前
Babel 完全上手指南:从零开始解锁现代 JavaScript 开发的超能力!
前端·javascript
尘心cx1 小时前
前端-CSS-day1
前端·css
CN-Dust1 小时前
[FMZ][JS]第一个回测程序--让时间轴跑起来
javascript
盛夏绽放1 小时前
Vue3 中 Excel 导出的性能优化与实战指南
vue.js·excel
全宝2 小时前
🎨前端实现文字渐变的三种方式
前端·javascript·css
没有钱的钱仔2 小时前
STM32低功耗模式全面指南
css·stm32·css3
yanlele3 小时前
前端面试第 75 期 - 2025.07.06 更新前端面试问题总结(12道题)
前端·javascript·面试
妮妮喔妮3 小时前
【无标题】
开发语言·前端·javascript