【Vue】点击侧边导航栏,右侧main对应显示

需求:点击侧边导航栏,右侧main对应显示

通过v-if或v-show等指令来控制不同内容的显示隐藏来实现

注意:

使用v-if时候进行导航栏切换,右侧显示区域可能会出现样式错乱;使用v-show则不会出现此错误

html 复制代码
<template>
    <!-- Aside和Main区域 -->
    <el-container>
      <el-aside>
        <el-menu :default-active="asideActiveIndex" @select="handleAsideSelect">
          <el-menu-item index="basic-info">基本信息</el-menu-item>
          <el-menu-item index="tested-system">被测系统</el-menu-item>
        </el-menu>
      </el-aside>
      <el-main>
        <!-- 通过v-if来控制不同内容的显示 -->
        <div v-if="currentAside === 'basic-info'">basic-info</div>
        <div v-if="currentAside === 'tested-system'">tested-system</div>
      </el-main>
    </el-container>
</template>

<script>
export default {
  data() {
    return {
      asideActiveIndex: 'basic-info',
      currentAside: 'basic-info',

    };
  },
  methods: {
    handleAsideSelect(key, keyPath) {
      this.currentAside = key;
      console.log("key", key);
      if (key === '/basic-info') {
        console.log("切换到基本信息选项卡");
      } else if (key === '/tested-system') {
        console.log("切换到样品清单选项卡");
      }
    },
  }
};
</script>
相关推荐
浏览器API调用工程师_Taylor22 分钟前
日报自动化实战:告别手动复制粘贴
前端·javascript·node.js
晴殇i27 分钟前
JavaScript还能这样写?!ES2025新语法让代码优雅到极致
前端·javascript·程序员
浏览器API调用工程师_Taylor37 分钟前
我是如何将手动的日报自动化的☺️☺️☺️
前端·javascript·爬虫
东哥很忙XH1 小时前
flutter开发的音乐搜索app
android·javascript·flutter
前端Hardy1 小时前
HTML&CSS&JS:抖音爆火的满屏“关心弹幕”酷炫卡片,已经帮你打包好了,快来体验吧!
前端·javascript·css
江城开朗的豌豆1 小时前
我的Vue项目胖成球了!用Webpack给它狠狠瘦个身
前端·javascript
WebInfra1 小时前
Rspack 1.6 发布:让打包产物更小、更纯净
前端·javascript·前端框架
Mintopia1 小时前
⚙️ Next.js 接口限流与审计全攻略 —— 用 @upstash/ratelimit 打造优雅“闸门”
前端·javascript·全栈
Mintopia2 小时前
🌐 实时翻译 + AIGC:Web跨语言内容生成的技术闭环
前端·javascript·aigc
前端开发爱好者2 小时前
Vite+ 获得 1250万美元的 A 轮融资,生态加速!
前端·javascript