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>
相关推荐
用户261245834016123 分钟前
vue学习路线(11.watch对比computed)
前端·vue.js
gnip33 分钟前
markdown预览自定义扩展实现
前端·javascript
G等你下课1 小时前
AJAX请求跨域问题
前端·javascript·http
阑梦清川1 小时前
Java后端项目前端基础Vue(二)
vue.js
爱编程的喵1 小时前
JavaScript闭包深度解析:从作用域到实战应用
前端·javascript
ITfeib1 小时前
Flutter
开发语言·javascript·flutter
雪碧聊技术2 小时前
深入解析Vue中v-model的双向绑定实现原理
前端·javascript·vue.js·v-model
打不着的大喇叭3 小时前
uniapp的光标跟随和打字机效果
前端·javascript·uni-app
Sun_light3 小时前
6个你必须掌握的「React Hooks」实用技巧✨
前端·javascript·react.js
爱学习的茄子3 小时前
深度解析JavaScript中的call方法实现:从原理到手写实现的完整指南
前端·javascript·面试