vue练习demo(1)——使用vue基本指令实现切换菜单栏效果

这篇文章最后的小demo大家解决了吗?
我来更新代码了哦!
实现效果的方式有很多种,我这只是其中一种方法,
如果大家有什么不同的意见可以相互讨论。
需要实现的效果:

  • 菜单栏+与菜单相对应的内容区域
  • 点击菜单栏的时候添加样式
  • 点击不同的菜单,显示对应的内容区域

核心代码如下:

<style>
    li{
     
      list-style: none;
      display: inline-block;
      padding: 10px 30px;
      margin: 0;
      background-color: #d8d8d8;
    }
    li.active{
     
      background-color
  • 0
    点赞
  • 5
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
好的,以下是使用Vue3和Element Plus实现手机端侧边菜单栏的步骤: 1. 安装Vue3和Element Plus 首先,你需要安装Vue3和Element Plus。你可以通过npm或yarn安装它们。具体安装命令如下: ``` npm install vue@next npm install element-plus@next ``` 或者 ``` yarn add vue@next yarn add element-plus@next ``` 2. 创建侧边菜单组件 接下来,你需要创建一个侧边菜单组件。你可以使用Element Plus的Menu组件来实现。以下是一个基本的侧边菜单组件示例: ``` <template> <div class="sidebar-menu"> <el-menu :default-active="$route.path" class="el-menu-vertical-demo" router> <el-menu-item index="/"> <i class="el-icon-menu"></i> <span>首页</span> </el-menu-item> <el-menu-item index="/about"> <i class="el-icon-info"></i> <span>关于我们</span> </el-menu-item> <el-menu-item index="/contact"> <i class="el-icon-phone"></i> <span>联系我们</span> </el-menu-item> </el-menu> </div> </template> <script> import { defineComponent } from 'vue' export default defineComponent({ name: 'SidebarMenu', }) </script> <style> .sidebar-menu { height: 100%; background-color: #f0f2f5; padding: 20px; } </style> ``` 在这个示例中,我们使用Vue Router来处理路由。我们还使用了Element Plus的Menu组件来创建菜单项。 3. 在App组件中引入侧边菜单组件 接下来,你需要在App组件中引入侧边菜单组件。以下是一个基本的App组件示例: ``` <template> <div class="app"> <el-container> <el-aside width="200px"> <sidebar-menu></sidebar-menu> </el-aside> <el-container> <router-view></router-view> </el-container> </el-container> </div> </template> <script> import { defineComponent } from 'vue' import SidebarMenu from './components/SidebarMenu.vue' export default defineComponent({ name: 'App', components: { SidebarMenu, }, }) </script> <style> .app { height: 100%; } </style> ``` 在这个示例中,我们使用了Element Plus的Container和Aside组件来创建一个侧边菜单栏和一个主内容区域。我们还引入了我们之前创建的侧边菜单组件。 4. 完成 现在,你已经创建好了一个基本的手机端侧边菜单栏。你可以根据你的需求自定义样式和菜单项。 希望这可以帮助到你!
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

·傻蛋儿·

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值