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

news2024/11/18 8:23:06

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

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

实现效果如下:

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/1867715.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

【SpringBoot Web框架实战教程(开源)】01 使用 pom 方式创建 SpringBoot 第一个项目

导读 这是一系列关于 SpringBoot Web框架实战 的教程&#xff0c;从项目的创建&#xff0c;到一个完整的 web 框架&#xff08;包括异常处理、拦截器、context 上下文等&#xff09;&#xff1b;从0开始&#xff0c;到一个可以直接运用在生产环境中的web框架。而且所有源码均开…

SAP ERP公有云(全称 SAP S/4HANA Cloud Public Edition),赋能企业成为智能可持续的企业

在数字化浪潮中&#xff0c;每一家企业都需要应对快速的市场变化&#xff0c;不断追求降本增效&#xff0c;为创新提供资源&#xff0c;发展新的业务模式&#xff0c;安全无忧地完成关键任务系统的转型。 10年前&#xff0c;SAP进入云领域&#xff0c;用云ERP和覆盖全线业务的云…

负载组指南说明-负载柜

什么是负载组&#xff1f; 负载组是一种设备&#xff0c;旨在准确模拟电源在实际应用中看到的负载。这种负载组可以用电阻、电感或电容元件构建。它是一种电阻装置&#xff0c;以热量的形式消散一定量的能量&#xff0c;可以通过自然对流、强制空气或水冷系统去除。 为什么要使…

嵌入式工程师从0开始,到底该学什么,怎么学

在开始前刚好我有一些资料&#xff0c;是我根据网友给的问题精心整理了一份「嵌入式的资料从专业入门到高级教程」&#xff0c; 点个关注在评论区回复“666”之后私信回复“666”&#xff0c;全部无偿共享给大家&#xff01;&#xff01;&#xff01;嵌入式是个大筐&#xff0…

ERP收费模式是怎样的?SAP ERP是如何收费的?

一、购置SAP ERP系统的费用组成 1、软件费用 传统的ERP系统大多为许可式&#xff0c;即企业在购买ERP服务时付清所有费用&#xff0c;将ERP系统部署于自己的服务器中。根据所购买ERP系统品牌的不同&#xff0c;价格上也有一定的差异。采购ERP系统许可后&#xff0c;后续维护、…

【计算机毕业设计】092基于微信小程序二手闲置交易市场

&#x1f64a;作者简介&#xff1a;拥有多年开发工作经验&#xff0c;分享技术代码帮助学生学习&#xff0c;独立完成自己的项目或者毕业设计。 代码可以私聊博主获取。&#x1f339;赠送计算机毕业设计600个选题excel文件&#xff0c;帮助大学选题。赠送开题报告模板&#xff…

基于幅值判断的工频故障分量距离保护

统的继电保护原理是基于工频电气量的&#xff0c;但近年来&#xff0c;反应故障分量的高速继电保护原理在微机保护装置中被广泛应用。故障分量只在设备发生故障时才出现&#xff0c;因此可以用叠加原理来分析其特征。 将电力系统发生的故障视为非故障状态与故障附加状态的叠加…

vant组件 顶部下拉刷新和页面底部下拉获取数据+顶部搜索框

1.html部分&#xff08;顶部tab切换无&#xff0c;只有主体list部分&#xff09; <div class"yd" ><!-- yd端 --><!-- 搜索框 --><van-searchv-model"ydsearchvalue"show-actionplaceholder"请输入搜索关键词"search"…

供应链攻击是什么?

随着企业对技术和连接性的依赖日益增加&#xff0c;以及对第三方的普遍依赖&#xff0c;供应链攻击变得越来越普遍。这些攻击旨在通过供应商和商业伙伴损害企业。 供应链攻击可能对企业和组织构成重大威胁&#xff0c;因为它们可能危及它们的安全以及向客户提供的产品和服务的…

【笔记】事务隔离级别以及MVCC解决幻读

事务提交可能碰到的问题&#xff1a; &#xff08;1&#xff09;脏读&#xff1a;事务1对数据进行修改但还没提交&#xff0c;事务2读取修改后的数据&#xff0c;之后事务1执行错误&#xff0c;回滚了&#xff0c;此时事务2的数据是错误的脏数据。 &#xff08;2&#xff09;不…

Stm32的DMA的学习

一&#xff0c;介绍 二&#xff0c;DMA框图 三&#xff0c;DMA通道 四&#xff0c;相关HAL库函数 五&#xff0c;配置DMA 六&#xff0c;Stm32CubeMX配置 【13.1】减少CPU传输负载 DMA直接存储器访问—Kevin带你读《STM32Cube高效开发教程基础篇》_哔哩哔哩_bilibili

Shell (一)Ubuntu的网络配置及软件安装

Ubuntu的配置及软件安装 网络配置 虚拟机提供的网络类型 桥接模式 主机和虚拟机分别拥有不同的ip地址&#xff0c;可以实现和外界设备通信 NAT模式 也可以联网&#xff0c;但是和主机共用同一个ip地址&#xff0c;外界无法识别虚拟机和主机发送的信息 仅主机模式 虚拟机不可…

Python学习笔记23:进阶篇(十二)常见标准库使用之日期时间功能datetime模块的学习使用

前言 本文是根据python官方教程中标准库模块的介绍&#xff0c;自己查询资料并整理&#xff0c;编写代码示例做出的学习笔记。 根据模块知识&#xff0c;一次讲解单个或者多个模块的内容。 教程链接&#xff1a;https://docs.python.org/zh-cn/3/tutorial/index.html 日期和时…

什么可以申请商标:企业和个人申请注册商标攻略!

常见的商标类型有汉字、 拼音或英文、有图形&#xff0c;还有把各种元素混合在一起的&#xff0c;还有声音商标和立体商标等&#xff0c;不过对普通企业相对来说很少用到&#xff0c;普推商标知产老杨看到的是&#xff0c;中小企业使用文字商标的比较居多&#xff0c;识别区分相…

thinksboard新建菜单

1.打开目录\thingsboard\ui-ngx\src\app\modules\home\pages新增npages文件夹 2.新增npages.module.ts以及npages-routing.module.ts控制文件&#xff0c;以及页面展示文件npages.component.html,npages.component.scss,npages.component.ts 3.打开npages.component.ts文件&…

机器人自主学习方法学习

各类算法的优缺点 原理&#xff1a; 该结构中初始的知识为0&#xff0c;不存在任何先验知识&#xff0c;让机器人与环境交互不断获得经验&#xff0c;是一个增量学习的过程。 算法举例 基于强化学习的开源算法及工具 OpenAI Gym&#xff1a;用于开发和比较强化学习算法的工具…

山水风景视频素材去哪里下?去哪里找?山水风景下载网站分享

在这个数字时代&#xff0c;视频已经成为最直观、有效的传达情感和分享故事的工具。对于那些渴望通过视频传递视觉美感和情感共鸣的创作者来说&#xff0c;拥有高质量的山水风景视频素材是关键。互联网虽然是一个信息量庞大的平台&#xff0c;但找到令人赞叹的山水风景视频素材…

上下文管理器在Python中的妙用

更多Python学习内容&#xff1a;ipengtao.com Python上下文管理器是一个非常强大的工具&#xff0c;它能够帮助开发者在特定代码块前后自动执行特定的操作&#xff0c;常用于资源管理&#xff0c;如文件操作、数据库连接和锁定等。本文将详细介绍Python上下文管理器的概念、使用…

Arduino - MG996R

Arduino - MG996R In this tutorial, we are going to learn how to use the MG996R high-torque servo motor with Arduino. 在本教程中&#xff0c;我们将学习如何将MG996R高扭矩伺服电机与Arduino一起使用。 Hardware Required 所需硬件 1Arduino UNO or Genuino UNO Ard…

Python终于可以在线编程了!

优势 在线编程&#xff0c;轻量级&#xff0c;无需安装Python环境。 在线编程优势&#xff1a; 无需安装和配置环境: 在线编程平台不需要用户在本地安装任何软件或配置开发环境。这对初学者和那些希望快速上手进行编程的人非常有利。跨平台兼容性: 这些平台可以在任何具有互联网…