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>
相关推荐
独立开阀者_FwtCoder28 分钟前
【Augment】 Augment技巧之 Rewrite Prompt(重写提示) 有神奇的魔法
前端·javascript·github
我想说一句39 分钟前
事件机制与委托:从冒泡捕获到高效编程的奇妙之旅
前端·javascript
汤姆Tom1 小时前
JavaScript reduce()函数详解
javascript
小飞悟1 小时前
你以为 React 的事件很简单?错了,它暗藏玄机!
前端·javascript·面试
中微子1 小时前
JavaScript 事件机制:捕获、冒泡与事件委托详解
前端·javascript
蓝翔认证10级掘手1 小时前
🤯 家人们谁懂啊!我的摸鱼脚本它...它成精了!🚀
javascript
炒毛豆2 小时前
vue3.4中的v-model的用法~
前端·vue.js
前端康师傅2 小时前
JavaScript 中你不知道的按位运算
前端·javascript
小桥风满袖2 小时前
Three.js-硬要自学系列38之专项学习缓冲几何体
前端·css·three.js
tianchang2 小时前
策略模式(Strategy Pattern)深入解析与实战应用
前端·javascript·代码规范