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>
相关推荐
魔云连洲9 分钟前
Vue的响应式底层原理:Proxy vs defineProperty
前端·javascript·vue.js
专注VB编程开发20年12 分钟前
CSS定义网格的列模板grid-template-columns什么意思,为什么要用这么复杂的单词
前端·css
Hilaku25 分钟前
深入URL和URLSearchParams:别再用正则表达式去折磨URL了
前端·javascript·代码规范
weixin_4569042731 分钟前
Vue.jsmain.js/request.js/user.js/store/index.js Vuex状态管理项目核心模块深度解析
前端·javascript·vue.js
伍哥的传说34 分钟前
Vue 3.6 Alien Signals:让响应式性能飞跃式提升
前端·javascript·vue.js·vue性能优化·alien-signals·细粒度更新·vue 3.6新特性
华科云商xiao徐1 小时前
Java并发编程常见“坑”与填坑指南
javascript·数据库·爬虫
奶昔不会射手1 小时前
css3之grid布局
前端·css·css3
举个栗子dhy2 小时前
解决在父元素上同时使用 onMouseEnter和 onMouseLeave时导致下拉菜单无法正常展开或者提前收起问题
前端·javascript·react.js
前端与小赵2 小时前
vue3和vue2生命周期的区别
前端·javascript·vue.js