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

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

  • 首先安装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"
    >



    职跃助手

    <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中:

实现效果如下:

相关推荐
前端小巷子16 分钟前
Web开发中的文件上传
前端·javascript·面试
翻滚吧键盘1 小时前
{{ }}和v-on:click
前端·vue.js
上单带刀不带妹1 小时前
手写 Vue 中虚拟 DOM 到真实 DOM 的完整过程
开发语言·前端·javascript·vue.js·前端框架
前端风云志1 小时前
typescript结构化类型应用两例
javascript
杨进军1 小时前
React 创建根节点 createRoot
前端·react.js·前端框架
ModyQyW2 小时前
用 AI 驱动 wot-design-uni 开发小程序
前端·uni-app
说码解字2 小时前
Kotlin lazy 委托的底层实现原理
前端
gnip2 小时前
总结一期正则表达式
javascript·正则表达式
Q_970956392 小时前
java+vue+SpringBoo校园失物招领网站(程序+数据库+报告+部署教程+答辩指导)
java·数据库·vue.js
爱分享的程序员2 小时前
前端面试专栏-算法篇:18. 查找算法(二分查找、哈希查找)
前端·javascript·node.js