VUE实现点击导航栏进行切换右边内容

首先看看效果,左边导航栏进行切换,右边内容进行切换


代码如下


<div>
  <el-tabs :tab-position="tabPosition" style="height: 800px;">
    <el-tab-pane label="通知通告">通知通告</el-tab-pane>
    <el-tab-pane label="经验交流">经验交流</el-tab-pane>
    <el-tab-pane label="学习园地">学习园地</el-tab-pane>
    <el-tab-pane label="基层动态">基层动态</el-tab-pane>
    <el-tab-pane label="车辆安全">车辆安全</el-tab-pane>
    <el-tab-pane label="烹饪美食">烹饪美食</el-tab-pane>
    <el-tab-pane label="卫生常识">卫生常识</el-tab-pane>
    <el-tab-pane label="采购方式">采购方式</el-tab-pane>
    <el-tab-pane label="招投标项目公式">招投标项目公式</el-tab-pane>
    <el-tab-pane label="装备采购政治">装备采购政治</el-tab-pane>
  </el-tabs>
</div>

<script>

export default {

 data() {

   return {

     tabPosition: 'left'

    };

  }

};

</script>

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

微信小程序——实现二维码扫描功能(含代码)

✅作者简介&#xff1a;2022年博客新星 第八。热爱国学的Java后端开发者&#xff0c;修心和技术同步精进。 &#x1f34e;个人主页&#xff1a;Java Fans的博客 &#x1f34a;个人信条&#xff1a;不迁怒&#xff0c;不贰过。小知识&#xff0c;大智慧。 &#x1f49e;当前专栏…

OpenGL ES 文字渲染进阶--渲染中文字体

旧文 OpenGL ES 文字渲染方式有几种? 一文中分别介绍了 OpenGL 利用 Canvas 和 FreeType 绘制文字的方法。 无论采用哪种方式进行渲染,本质上原理都是纹理贴图:将带有文字的图像上传到纹理,然后进行贴图。 渲染中文字体 利用 Canvas 绘制中文字体和绘制其他字体在操作方式上…

redis实现消息队列的几种方式

一、了解 众所周知&#xff0c;redis是我们日常开发过程中使用最多的非关系型数据库&#xff0c;也是消息中间件。实际上除了常用的rabbitmq、rocketmq、kafka消息队列&#xff08;大家自己下去研究吧~模式都是通用的&#xff09;&#xff0c;我们也能使用redis实现消息队列。…

WLAN消失或者已连接但是访问不了互联网

目录 1、WLAN已连接但是访问不了互联网 2、WLAN图标消失 今晚电脑突然连不上网了&#xff0c;重启试了好多种办法都没有用。 1、WLAN已连接但是访问不了互联网 这个的问题很多&#xff0c;建议直接网络重置&#xff0c;即将网络驱动全部删除&#xff0c;然后重新安装。 首先…

Hadoop生态圈框架部署(六)- HBase完全分布式部署

文章目录 前言一、Hbase完全分布式部署&#xff08;手动部署&#xff09;1. 下载Hbase2. 上传安装包3. 解压HBase安装包4. 配置HBase配置文件4.1 修改hbase-env.sh配置文件4.2 修改hbase-site.xml配置文件4.3 修改regionservers配置文件4.4 删除hbase中slf4j-reload4j-1.7.33.j…

【微服务】Docker 容器化

一、初识Docker 1. 为什么需要 Docker 大型项目组件较多&#xff0c;运行环境也较为复杂&#xff0c;部署时会遇到一些问题&#xff1a; 依赖关系复杂&#xff0c;容易出现兼容性的问题开发、测试、生产环境有差异 Docker 如何解决依赖的兼容问题 将应用的Libs&#xff08;…

「Py」Python基础篇 之 Python都可以做哪些自动化?

✨博客主页何曾参静谧的博客&#x1f4cc;文章专栏「Py」Python程序设计&#x1f4da;全部专栏「Win」Windows程序设计「IDE」集成开发环境「UG/NX」BlockUI集合「C/C」C/C程序设计「DSA」数据结构与算法「UG/NX」NX二次开发「QT」QT5程序设计「File」数据文件格式「UG/NX」NX定…

无插件H5播放器EasyPlayer.js网页web无插件播放器vue和react详细介绍

EasyPlayer.js H5播放器&#xff0c;是一款能够同时支持HTTP、HTTP-FLV、HLS&#xff08;m3u8&#xff09;、WS、WEBRTC、FMP4视频直播与视频点播等多种协议&#xff0c;支持H.264、H.265、AAC、G711A、Mp3等多种音视频编码格式&#xff0c;支持MSE、WASM、WebCodec等多种解码方…

什么是量化交易

课程大纲 内容初级初识量化&#xff0c;理解量化 初识量化 传统量化和AI量化的区别 量化思想挖掘 量化思想的挖掘及积累技巧 量化代码基础&#xff1a; python、pandas、SQL基础语法 金融数据分析 常用金融分析方式 常用因子分析方式 数据分析实战练习 回测及交易引擎 交易引擎…

Ajax 获取进度和中断请求

HTML加入一些内容方便看效果和做交互&#xff1a; <div><p>当前传输进度&#xff1a;<span id"progress">0%</span></p><button id"send">发送</button><button id"btn">中断</button> …

MCU移植LVGL

一.准备 1.1. 任意一个屏幕可以正常显示的GD32工程,stm32等其它mcu都一样&#xff1a; 1.2. LVGL源码 下载最新版源文件:https://github.com/lvgl/lvgl/tree/release/v8.3 我们会得到一个压缩文件&#xff0c;然后解压出来备用&#xff0c;现在准备好了一个GD32 Keil工程和一…

❤React-JSX语法认识和使用

1、JSX基本使用​ JSX是React的核心 JSX是ES的扩展 jsx语法 -> 普通的JavaScript代码 -> babel React可以使用JSX的前提和原因&#xff1a; React生态系统支持&#xff1a; 脚手架通常用于构建React应用程序&#xff0c;而JSX是React框架的核心语法之一。因此&#xf…

业务、技术、管理,谁才是指标平台的用户?

指标平台究竟应该给谁用&#xff1f;这个问题的答案涉及业务侧、技术侧和管理侧三个关键维度&#xff0c;每个维度都有不同的角色和需求。 业务侧&#xff1a;赋能一线&#xff0c;驱动增长 在业务侧&#xff0c;指标平台是前线员工的“作战地图”和“导航仪”。业务人员&…

向日葵软件Windows系统连接苹果系统(MacOS)的无反应问题解决办法

前言 向日葵软件最近开始收费了的&#xff0c;打算收割我们。这也是没有办法的事情&#xff0c;毕竟他们的程序员也是需要吃饭的&#xff0c;我也表示理解。 所以&#xff0c;我在连接了几次发现反应很迟钝后&#xff0c;果断的买了158元的包年会员。 但是&#xff0c;在买了会…

pip install volcengine-python-sdk报错

使用MetaGPT&#xff0c;配环境的时候&#xff0c;报错信息为&#xff1a; error: could not create ‘build\lib\volcenginesdktransitrouter\models\transit_router_traffic_qos_marking_policy_for_describe_transit_router_traffic_qos_marking_policies_output.py’: No s…

二叉树的遍历(手动)

树的遍历分四种&#xff1a; 层序遍历 前序遍历 中序遍历 后序遍历 层序遍历&#xff1a; 很好理解&#xff0c;就是bfs嘛&#xff08;二不二叉都行&#xff09; 前序遍历&#xff1a; 又叫先跟遍历&#xff0c;遍历顺序是根->左->右&#xff08;子树里也是&#…

2024 年 Apifox 和 Postman 对比介绍详细版

Apifox VS Postman &#xff0c;当下流行的的两款 API 开发工具&#xff0c;2024 版对比&#xff01;

【C语言刷力扣】1502.判断能否形成等差数列

题目&#xff1a; 解题思路; 先对数组进行升序排序&#xff0c;再用循环对比两相邻元素之间的差值。若出现不同&#xff0c;即不是等差数列。 时间复杂度&#xff1a; 空间复杂度&#xff1a; int compare(const void* a, const void* b) {return (*(int *)b - *(int *)a…

自动驾驶系列—从数据采集到存储:解密自动驾驶传感器数据采集盒子的关键技术

&#x1f31f;&#x1f31f; 欢迎来到我的技术小筑&#xff0c;一个专为技术探索者打造的交流空间。在这里&#xff0c;我们不仅分享代码的智慧&#xff0c;还探讨技术的深度与广度。无论您是资深开发者还是技术新手&#xff0c;这里都有一片属于您的天空。让我们在知识的海洋中…

程序员的数学之进制与零

最近一年多发生了很多平凡的大事&#xff0c;应接不暇&#xff0c;一度断更。从今儿起再接上来。 先从数学开始吧&#xff0c;因为太枯燥了。 生活中有许多种进制在共同起作用&#xff0c;例如&#xff0c;数学上的十进制、计算机中的二进制、八进制和十六进制、计时的60进制、…