欢迎来到尧图网

客户服务 关于我们

您的位置:首页 > 科技 > 能源 > 【项目实训】前端页面初探索(前期探索)

【项目实训】前端页面初探索(前期探索)

2025/3/12 22:25:07 来源:https://blog.csdn.net/m0_63711281/article/details/139922385  浏览:    关键词:【项目实训】前端页面初探索(前期探索)

前期,由于没有确定页面展示形式,于是进行了很多探索

  • 首先安装element-ui

  • 导入elemnt-plus

添加use:

  • 设置一个全局样式

  • 编写导航栏
<el-menu:default-active="activeIndex"class="el-menu-demo"background-color="#95d475"text-color="#606266"active-text-color="#ffd04b"mode="horizontal"@select="handleSelect"><div style = "height:30px;line-height: 60px;text-align: center;padding-left: 10px;font-size: 25px"><img src="../assets/2.jpg" alt="" style="width:40px;padding-right: 7px;position: relative;top:9px"><b style="color:black">职跃助手</b></div><el-menu-item index="1">首页</el-menu-item><el-menu-item index="2">面试经验总结</el-menu-item><el-menu-item index="3" >模拟面试</el-menu-item>

样式如图:

  • 进行页面间路由

首先在index.js中编写路由逻辑

其次,在导航栏部分编写点击实现跳转页面的逻辑,即在el-menu处加router,并把index设置为相应的页面

  • 编写面试经验页

首先编写两个选择器用来选择公司岗位,然后进行确认

 需要注意,为了实现选择一个选项后,在选项框中出现该选项,要把v-model添加到data中:

实现效果如下:

版权声明:

本网仅为发布的内容提供存储空间,不对发表、转载的内容提供任何形式的保证。凡本网注明“来源:XXX网络”的作品,均转载自其它媒体,著作权归作者所有,商业转载请联系作者获得授权,非商业转载请注明出处。

我们尊重并感谢每一位作者,均已注明文章来源和作者。如因作品内容、版权或其它问题,请及时与我们联系,联系邮箱:809451989@qq.com,投稿邮箱:809451989@qq.com

热搜词