vue 引用第三方库 Swpier轮播图

本文全程干货,没有废话
1.使用 npm 安装 swiper,使用 save 保存到 packjson 中
npm install --save swiper
2、把 swiper看成是第三方库或者是组件,然后按照,引用,挂载组件,使用组件三步法。
3、在 script 里的 export default 上面引用这俩。
import { Swiper, SwiperSlide } from ‘swiper/vue’;
import ‘swiper/css’;
4、
在 export default{components:{Swiper,SwiperSlide,}}挂载这个组件
5、在写 html 的地方使用这 swpier 组件
<swiper><swiper-slide>Slide 1<img src="./assets/img.webp" alt=""></swiper-slide><swiper-slide>Slide 3<img src="./assets/logo.png" alt=""> </swiper-slide><swiper-slide> Slide 3<img src="./assets/img.webp" alt=""> </swiper-slide> </swiper>
原理
通过引用-挂载-第三方的 swpier-然后通过 swpier 作为父容器,swiperslide 作为里面的轮播图。
列表的对应关系
| 轮播图 | 无序列表 | 有序列表 |
|---|---|---|
| swiper | ul | ol |
| swiperslide | li | li |
相关文章:
vue 引用第三方库 Swpier轮播图
本文全程干货,没有废话 1.使用 npm 安装 swiper,使用 save 保存到 packjson 中 npm install --save swiper 2、把 swiper看成是第三方库或者是组件,然后按照,引用,挂载组件,使用组件三步法。 3、在 script…...
RabbitMQ-直连交换机(direct)使用方法
RabbitMQ-默认读、写方式介绍 RabbitMQ-发布/订阅模式 目录 1、概述 2、直连交换机 3、多重绑定 4、具体代码实现 4.1 生产者部分 4.2 消费者部分 5、运行代码 6、总结 1、概述 直连交换机,可以实现类似路由的功能,消息从交换机发送到哪个队列…...
942. 增减字符串匹配 - 力扣
1. 题目 由范围 [0,n] 内所有整数组成的 n 1 个整数的排列序列可以表示为长度为 n 的字符串 s ,其中: 如果 perm[i] < perm[i 1] ,那么 s[i] I 如果 perm[i] > perm[i 1] ,那么 s[i] D 给定一个字符串 s ,重构排列 pe…...
2024华为OD机试真题-机器人搬砖-C++(C卷D卷)
题目描述 机器人搬砖,一共有N堆砖存放在N个不同的仓库中,第i堆砖中有bricks[i]块砖头, 要求在8小时内搬完。机器人每小时能搬砖的数量取决于有多少能量格, 机器人一个小时中只能在一个仓库中搬砖,机器人的能量格每小时补充一次且能量格只在这一个小时有效,为使得机器人损…...
【DevOps】深入了解RabbitMQ:AMQP协议基础、消息队列工作原理和应用场景
目录 一、核心功能 二、优势 三、核心概念 四、工作原理 五、交换机类型 六、消息确认 七、持久性和可靠性 八、插件和扩展 九、集群和镜像队列 十、客户端库 十一、管理界面 十二、应用场景 RabbitMQ是一个基于AMQP协议的消息队列中间件,提供高可用、可…...
Mysql 技术实战篇
命令行 导出 - -h localhost:指定MySQL服务器的主机地址为本地主机。如果MySQL服务器在其他主机上,请将localhost替换为相应的主机地址。 - -u username:指定连接MySQL服务器的用户名。将username替换为您的有效用户名。 - -p:提…...
App自动化测试_Python+Appium使用手册
一、Appium的介绍 Appium是一款开源的自动化测试工具,支持模拟器和真机上的原生应用、混合应用、Web应用;基于Selenium二次开发,Appium支持Selenium WebDriver支持的所有语言(java、 Object-C 、 JavaScript 、p hp、 Python等&am…...
k8s-部署对象存储minio
环境信息 minio版本 :最新 k8s 版本1.22 使用nfs作为共享存储 一.单节点安装包部署 脚本部署,一键部署,单节点应用于数据量小,一些缓存存储,比如gitlab-runner的产物数据,maven的打包依赖数据 #!/bin/bash# 步骤…...
go常用命令
创建一个module(逻辑概念) #The go mod init command initializes and writes a new go.mod file in the current directory, in effect creating #a new module rooted at the current directory. #specify a module path that serves as the module’s name. go mod initclon…...
【中年危机】程序猿自救指南
中年危机,一个听起来就充满挑战的词汇,它不仅仅是一个年龄的标记,更是一个个人成长和职业发展的转折点。 构架个人品牌: 学会打造IP个人品牌是职业生涯中的重要资产。在中年时期,你已经积累了丰富的经验和知识&#x…...
vueRouter路由总结
https://blog.csdn.net/qq_24767091/article/details/119326884...
算法工程师需要学习C++的哪些知识?
在开始前刚好我有一些资料,是我根据网友给的问题精心整理了一份「C的资料从专业入门到高级教程」, 点个关注在评论区回复“888”之后私信回复“888”,全部无偿共享给大家!!!以下是算法工程师需要学习的一些…...
CTF网络安全大赛简单的web抓包题目:HEADache
题目来源于:bugku 题目难度:简单 题目 描 述: > Wanna learn about some types of headache? > Lets dig right into it! 下面是题目源代码: <!DOCTYPE html> <html> <head><meta charset"utf-8"&…...
Qt Creator创建Python界面工程并打包为可执行exe文件
Qt Creator创建Python界面工程并打包为可执行exe文件_qtcreator创建python工程-CSDN博客...
基于单片机的步进电机控制系统的研究
摘要: 步进电机控制作为一种电机控制系统的重要模式,属于现代数字化控制的重要手段,其应用已经相当广泛。步进电机属于感应电机类,利用电子电路将直流电分为分时供电、多相时序供电控制电流,利用这种电流为电机供电,驱使电机工作。步进电机不能够在常规模式下使用,必须通过双环…...
BioPorto胰高血糖素样肽-1抗体(GLP-1)
丹麦BioPorto Diadnostics公司致力于提供世界领先的GLP-1抗体。基于结合GLP-1位点的不同,他们筛选出了不同的抗GLP-1抗体。有的抗体可以同时结合GLP-1的活性形式和非活性形式,有的专门结合生物活性形式的GLP-1。在开发和检测GLP-1相关治疗的过程中&#…...
Go 语言字符串及 strings 和 strconv 包
在 Go 语言编程中,字符串是最基本、最常用的数据类型之一。无论是处理用户输入、读取文件内容,还是生成输出,字符串操作无处不在。为了方便开发者对字符串进行各种操作,Go 语言提供了强大的 strings 包和 strconv 包。strings 包包…...
政府窗口服务第三方评估报告如何写
撰写政府窗口服务第三方评估报告需要结构清晰、内容详实,并包含对评估过程和结果的详细描述以及改进建议。以下是第三方评估机构民安智库(第三方社会评估调研公司)给出的一个政府窗口服务第三方评估报告简单的示例: 一、封面 报…...
若依前后端分离Spring Security新增手机号登录
备忘贴 转自:【若依RuoYi短信验证码登录】汇总_数据库_z_xiao_qiang-RuoYi 若依 配置Security: 按照Security的流程图可知,实现多种方式登录,只需要重写三个主要的组件,第一个用户认证处理过滤器,第二个用户认证tok…...
Oracle操作扩可变字符长度交易影响分析-较小
使用AI帮助学习知识 以下知识来至AI oracle 一张大表,对可变字符串长度从10扩到20位,oracle底层存储是否会发生变化,先锁表,更新表字典信息,然后会不会重新整理表,在有交易的情况下导致大量交易失效&#…...
wordpress后台更新后 前端没变化的解决方法
使用siteground主机的wordpress网站,会出现更新了网站内容和修改了php模板文件、js文件、css文件、图片文件后,网站没有变化的情况。 不熟悉siteground主机的新手,遇到这个问题,就很抓狂,明明是哪都没操作错误&#x…...
鱼香ros docker配置镜像报错:https://registry-1.docker.io/v2/
使用鱼香ros一件安装docker时的https://registry-1.docker.io/v2/问题 一键安装指令 wget http://fishros.com/install -O fishros && . fishros出现问题:docker pull 失败 网络不同,需要使用镜像源 按照如下步骤操作 sudo vi /etc/docker/dae…...
深入解析C++中的extern关键字:跨文件共享变量与函数的终极指南
🚀 C extern 关键字深度解析:跨文件编程的终极指南 📅 更新时间:2025年6月5日 🏷️ 标签:C | extern关键字 | 多文件编程 | 链接与声明 | 现代C 文章目录 前言🔥一、extern 是什么?&…...
Reasoning over Uncertain Text by Generative Large Language Models
https://ojs.aaai.org/index.php/AAAI/article/view/34674/36829https://ojs.aaai.org/index.php/AAAI/article/view/34674/36829 1. 概述 文本中的不确定性在许多语境中传达,从日常对话到特定领域的文档(例如医学文档)(Heritage 2013;Landmark、Gulbrandsen 和 Svenevei…...
【Go语言基础【12】】指针:声明、取地址、解引用
文章目录 零、概述:指针 vs. 引用(类比其他语言)一、指针基础概念二、指针声明与初始化三、指针操作符1. &:取地址(拿到内存地址)2. *:解引用(拿到值) 四、空指针&am…...
WebRTC从入门到实践 - 零基础教程
WebRTC从入门到实践 - 零基础教程 目录 WebRTC简介 基础概念 工作原理 开发环境搭建 基础实践 三个实战案例 常见问题解答 1. WebRTC简介 1.1 什么是WebRTC? WebRTC(Web Real-Time Communication)是一个支持网页浏览器进行实时语音…...
nnUNet V2修改网络——暴力替换网络为UNet++
更换前,要用nnUNet V2跑通所用数据集,证明nnUNet V2、数据集、运行环境等没有问题 阅读nnU-Net V2 的 U-Net结构,初步了解要修改的网络,知己知彼,修改起来才能游刃有余。 U-Net存在两个局限,一是网络的最佳深度因应用场景而异,这取决于任务的难度和可用于训练的标注数…...
用鸿蒙HarmonyOS5实现中国象棋小游戏的过程
下面是一个基于鸿蒙OS (HarmonyOS) 的中国象棋小游戏的实现代码。这个实现使用Java语言和鸿蒙的Ability框架。 1. 项目结构 /src/main/java/com/example/chinesechess/├── MainAbilitySlice.java // 主界面逻辑├── ChessView.java // 游戏视图和逻辑├──…...
jdbc查询mysql数据库时,出现id顺序错误的情况
我在repository中的查询语句如下所示,即传入一个List<intager>的数据,返回这些id的问题列表。但是由于数据库查询时ID列表的顺序与预期不一致,会导致返回的id是从小到大排列的,但我不希望这样。 Query("SELECT NEW com…...
针对药品仓库的效期管理问题,如何利用WMS系统“破局”
案例: 某医药分销企业,主要经营各类药品的批发与零售。由于药品的特殊性,效期管理至关重要,但该企业一直面临效期问题的困扰。在未使用WMS系统之前,其药品入库、存储、出库等环节的效期管理主要依赖人工记录与检查。库…...
