当前位置: 首页 > news >正文

项目实战:基于Vue3实现一个小相册

                                相册的示例效果图

注意看注释...
要实现图片的相册效果,图片命名可以像{'img1.jpg','img2.jpg','img3.jpg'}类似于这种的命名方式。

  CSS部分:

<style>/* 伪元素选择器,用于在具有clear_ele类的元素内部的末尾添加一个新的元素 */.clear_ele::after{  content: "";  /* 这个伪元素的内容属性必须有 *//* 块级元素,便于占据一行空间 */display: block;clear: both;    /* 清除浮动 */}.box{margin-bottom: 20px;padding: 0;}.button{background-color: bisque;width: 20px;float: left;  text-align: center;  /* 使文本内容居中 */margin-right: 10px;border-radius: 8px;  /* 给按钮添加圆角 */cursor: pointer;  }.img{width: 480px;  height: 240px;border: 1px bisque solid;}</style>

HTML部分: 

        按照示例图做出一个简单的框架。利用v-bind绑定图片的路径,使得图片路径可以自动更新。通过v-on(@)为切换相片的按钮绑定一个函数,这个函数负责更改图片路径。

    <div id="app"><!--  利用插值运算符显示img.number --> <h2>基于Vue3实现的相册:展示第{{ img.number }}张相片</h2><!--  <img>标签通过v-bind绑定了图片的地址为img.url。 -->        <img v-bind:src="img.url"   class="img"> <ul type="none" class="clear_ele box"><!-- 列表通过v-for指令生成4个li元素,通过v-on绑定,点击button时调用jump函数,并且显示val的值 --><li v-for="(val, idx) in 4"  @click="jump(val)" class="button"> {{val}} </li></ul><!-- 通过@click绑定prev和next函数,用于切换上一张和下一张图片 --><button @click="prev">上一张</button>     <button @click="next">下一张</button></div>

JavaScript部分(Vue相关):

        把图片路径存储在响应式数据里,当这个响应式数据改变时,html的图片路径就会自动改变。

    <script type="module">// 通过import语句导入createApp,  ref,  reactiveimport { createApp,  ref,  reactive } from './vue.esm-browser.js'createApp({setup() {// 【定义数据】// 通过reactive函数创建一个响应式对象img,并设置图片的属性const img = reactive({number: 1,    // 图片的序号url: "./img_src/logo1.png"    // 图片的源地址})// 【定义函数】//上一张const prev = () => {img.number--// 当图片序号为0时,切换到第4张图片if (img.number == 0) {img.number = 4}img.url = `./img_src/logo${img.number}.png`                 }                //下一张const next = () => {img.number++// 当图片序号为5时,切换到第1张图片if (img.number == 5) {img.number = 1}img.url = `./img_src/logo${img.number}.png`}//跳转//根据传入的val值跳转到相应的图片const jump = (val) => {img.number = valimg.url = `./img_src/logo${img.number}.png`}//记得每一个对象和方法都要暴露出来return {img, prev,next,jump}}}).mount("#app")</script>

相关文章:

项目实战:基于Vue3实现一个小相册

相册的示例效果图 注意看注释... 要实现图片的相册效果&#xff0c;图片命名可以像{img1.jpg,img2.jpg,img3.jpg}类似于这种的命名方式。 CSS部分&#xff1a; <style>/* 伪元素选择器&#xff0c;用于在具有clear_ele类的元素内部的末尾添加一个新的元素 */.clear_ele:…...

macOS安装nvm node

macOS安装nvm macOS安装nvm创建 nvm 工作目录配置环境变量使用 nvm查看可用的 Node.js 版本安装特定版本 macOS安装nvm brew install nvm创建 nvm 工作目录 mkdir ~/.nvm配置环境变量 vim ~/.zshrc# nvm export NVM_DIR"$HOME/.nvm" [ -s "/opt/homebrew/opt…...

解决整合Django与Jinja2兼容性的问题

提问 解决整合Django与Jinja2时遇到了一些兼容性问题。已经按照常规步骤在我的settings.py中配置了Jinja2作为模板引擎&#xff0c;同时保留了Django默认的模板设置。然而尝试同时使用Django和Jinja2时&#xff0c;系统报错提示我没有指定模板。如果我尝试移除Django的默认模板…...

Elasticsearch面试内容整理-高级特性

Elasticsearch 提供了一系列高级特性,这些特性可以极大地增强其搜索、分析和管理能力,使得它在大数据场景中表现出色。以下是 Elasticsearch 的一些重要高级特性: 近实时搜索(Near Real-Time Search) Elasticsearch 的一个关键特性是 近实时搜索(NRT),这意味着数据写入…...

linux通过手工删除文件卸载oracle 11g rac的具体步骤

在linux操作系统中&#xff0c;有些时候我们自己学习和测试会临时搭建的oracle rac。事情完成后&#xff0c;我们想回收资源&#xff0c;需要去卸载oracle rac。为了快速卸载oracle rac&#xff0c;今天我们介绍下如何通过手工删除文件的方式来完成工作&#xff08;操作都需要在…...

【ArcGISPro】根据yaml构建原始Pro的conda环境

使用场景 我们不小心把原始arcgispro-py3的conda环境破坏了,我们就可以使用以下方法进行修复 查找文件 在arcgis目录下找到yaml文件 如果没找到请复制以下内容到新的yaml文件 channels: - esri - defaults dependencies: - anyio=4.2.0=py311haa95532_0 - appdirs=1.4.4=p…...

刷题笔记15

问题描述 小M和小F在玩飞行棋。游戏结束后&#xff0c;他们需要将桌上的飞行棋棋子分组整理好。现在有 N 个棋子&#xff0c;每个棋子上有一个数字序号。小M的目标是将这些棋子分成 M 组&#xff0c;每组恰好5个&#xff0c;并且组内棋子的序号相同。小M希望知道是否可以按照这…...

【LeetCode热题100】队列+宽搜

这篇博客是关于队列宽搜的几道题&#xff0c;主要包括N叉树的层序遍历、二叉树的锯齿形层序遍历、二叉树最大宽度、在每个数行中找最大值。 class Solution { public:vector<vector<int>> levelOrder(Node* root) {vector<vector<int>> ret;if(!root) …...

【阵列信号处理】相干信号和非相干信号生成

文章目录 一、总结二、知识点相干&#xff08;coherent&#xff09;和非相干&#xff08;incoherent&#xff09;信号相干信号生成代码 相关信号&#xff08;correlated signal&#xff09;相关信号生成代码 正交信号定义 本文记录博主的科研日记。如果对博主的其他文章感兴趣&…...

React 组件生命周期

React 组件生命周期 React 组件生命周期是React框架中一个核心概念,它描述了一个组件从创建到销毁的过程。理解组件生命周期对于高效开发React应用至关重要,因为它允许开发者在一个组件的不同阶段执行特定的逻辑。本文将详细介绍React组件的生命周期方法,并解释它们在组件的…...

Kylin Server V10 下基于Sentinel(哨兵)实现Redis高可用集群

一、什么是哨兵模式 Redis Sentinel 是一个分布式系统,为 Redis 提供高可用性解决方案。可以在一个架构中运行多个 Sentinel 进程(progress)这些进程使用流言协议(gossip protocols)来接收关于主服务器是否下线信息,并使用投票协议(agreement protocols)来决定是否执行…...

07-Making a Bar Chart with D3.js and SVG

课程链接 Curran的课程&#xff0c;通过 D3.js 的 scaleLinear, max, scaleBand, axisLeft, axisBottom&#xff0c;根据 .csv 文件生成一个横向柱状图。 【注】如果想造csv数据&#xff0c;可以使用通义千问&#xff0c;关于LinearScale与BandScale不懂的地方也可以在通义千…...

硅谷甄选前端项目环境配置笔记

此教程来自于尚硅谷 文章目录 **此教程来自于尚硅谷**硅谷甄选运营平台一、搭建后台管理系统模板1.1项目初始化1.1.1环境准备1.1.2初始化项目 1.2项目配置一、eslint配置1.1vue3环境代码校验插件1.2修改.eslintrc.cjs配置文件1.3.eslintignore忽略文件1.4运行脚本 二、配置**pr…...

6.7机器学习期末复习题

空间 样本空间 就是属性的所有可能情况&#xff0c;包括了一切可能出现或不可能出现的所有样本情况 版本空间&假设空间 假设空间就是在样本空间的基础上&#xff0c;给所有属性都加了一个通配符&#xff0c;表示任意即可&#xff1b;以及加上了一个空集&#xff0c;表示…...

1123--日期类

目录 一 java 1. Date类 2. calendar类 3. 第三代日期类‘ 3.1 常用方法 3.2 格式化操作 一 java 1. Date类 2. calendar类 3. 第三代日期类‘ 3.1 常用方法 3.2 格式化操作...

YOLOV5 /onnx模型转换成rknn

上两篇文章讲述了pytorch模型下best.pt转换成onnx模型&#xff0c;以及将onnx进行简化成为best-sim.onnx, 接下来这篇文章讲述如何将onnx模型转换成rknn模型&#xff0c;转换成该模型是为了在rk3568上运行 1.创建share文件夹 文件夹包含以下文件best-sim.onnx,rknn-tookit2-…...

Echarts+VUE饼图的使用(基础使用、多个饼图功能、单组饼图对应颜色使用)

安装&#xff1a;npm install echarts --save 配置:main.js // 引入echarts import * as echarts from echarts Vue.prototype.$echarts echarts一、基础饼图&#xff08;直接拷贝就能出效果&#xff09; <div class"big-box" ref"demoEhart"><…...

刘铁猛C#入门 026 重写与多态

类的继承 类成员的“横向扩展”(成员越来越多)类成员的“纵向扩展”(行为改变&#xff0c;版本增高)类成员的隐藏(不常用)重写与隐藏的发生条件&#xff1a;函数成员&#xff0c;可见&#xff0c;签名一致 函数成员:方法 、属性可见&#xff1a;父类修饰符是public protected …...

《筑牢安全防线:培养 C++安全编程思维习惯之道》

在当今数字化飞速发展的时代&#xff0c;软件安全的重要性已提升到前所未有的高度。C作为一种广泛应用于系统开发、游戏制作、高性能计算等众多领域的编程语言&#xff0c;其程序的安全性更是关乎重大。培养 C安全编程的思维习惯&#xff0c;不仅是开发者个人能力提升的关键&am…...

《TCP/IP网络编程》学习笔记 | Chapter 16:关于 I/O 流分离的其他内容

《TCP/IP网络编程》学习笔记 | Chapter 16&#xff1a;关于 I/O 流分离的其他内容 《TCP/IP网络编程》学习笔记 | Chapter 16&#xff1a;关于 I/O 流分离的其他内容分离 I/O 流2 次 I/O 流分离分离「流」的好处「流」分离带来的 EOF 问题 文件描述符的的复制和半关闭终止「流」…...

C++:std::is_convertible

C++标志库中提供is_convertible,可以测试一种类型是否可以转换为另一只类型: template <class From, class To> struct is_convertible; 使用举例: #include <iostream> #include <string>using namespace std;struct A { }; struct B : A { };int main…...

3.3.1_1 检错编码(奇偶校验码)

从这节课开始&#xff0c;我们会探讨数据链路层的差错控制功能&#xff0c;差错控制功能的主要目标是要发现并且解决一个帧内部的位错误&#xff0c;我们需要使用特殊的编码技术去发现帧内部的位错误&#xff0c;当我们发现位错误之后&#xff0c;通常来说有两种解决方案。第一…...

Keil 中设置 STM32 Flash 和 RAM 地址详解

文章目录 Keil 中设置 STM32 Flash 和 RAM 地址详解一、Flash 和 RAM 配置界面(Target 选项卡)1. IROM1(用于配置 Flash)2. IRAM1(用于配置 RAM)二、链接器设置界面(Linker 选项卡)1. 勾选“Use Memory Layout from Target Dialog”2. 查看链接器参数(如果没有勾选上面…...

QT: `long long` 类型转换为 `QString` 2025.6.5

在 Qt 中&#xff0c;将 long long 类型转换为 QString 可以通过以下两种常用方法实现&#xff1a; 方法 1&#xff1a;使用 QString::number() 直接调用 QString 的静态方法 number()&#xff0c;将数值转换为字符串&#xff1a; long long value 1234567890123456789LL; …...

ios苹果系统,js 滑动屏幕、锚定无效

现象&#xff1a;window.addEventListener监听touch无效&#xff0c;划不动屏幕&#xff0c;但是代码逻辑都有执行到。 scrollIntoView也无效。 原因&#xff1a;这是因为 iOS 的触摸事件处理机制和 touch-action: none 的设置有关。ios有太多得交互动作&#xff0c;从而会影响…...

【开发技术】.Net使用FFmpeg视频特定帧上绘制内容

目录 一、目的 二、解决方案 2.1 什么是FFmpeg 2.2 FFmpeg主要功能 2.3 使用Xabe.FFmpeg调用FFmpeg功能 2.4 使用 FFmpeg 的 drawbox 滤镜来绘制 ROI 三、总结 一、目的 当前市场上有很多目标检测智能识别的相关算法&#xff0c;当前调用一个医疗行业的AI识别算法后返回…...

Rapidio门铃消息FIFO溢出机制

关于RapidIO门铃消息FIFO的溢出机制及其与中断抖动的关系&#xff0c;以下是深入解析&#xff1a; 门铃FIFO溢出的本质 在RapidIO系统中&#xff0c;门铃消息FIFO是硬件控制器内部的缓冲区&#xff0c;用于临时存储接收到的门铃消息&#xff08;Doorbell Message&#xff09;。…...

智能分布式爬虫的数据处理流水线优化:基于深度强化学习的数据质量控制

在数字化浪潮席卷全球的今天&#xff0c;数据已成为企业和研究机构的核心资产。智能分布式爬虫作为高效的数据采集工具&#xff0c;在大规模数据获取中发挥着关键作用。然而&#xff0c;传统的数据处理流水线在面对复杂多变的网络环境和海量异构数据时&#xff0c;常出现数据质…...

视频行为标注工具BehaviLabel(源码+使用介绍+Windows.Exe版本)

前言&#xff1a; 最近在做行为检测相关的模型&#xff0c;用的是时空图卷积网络&#xff08;STGCN&#xff09;&#xff0c;但原有kinetic-400数据集数据质量较低&#xff0c;需要进行细粒度的标注&#xff0c;同时粗略搜了下已有开源工具基本都集中于图像分割这块&#xff0c…...

安全突围:重塑内生安全体系:齐向东在2025年BCS大会的演讲

文章目录 前言第一部分&#xff1a;体系力量是突围之钥第一重困境是体系思想落地不畅。第二重困境是大小体系融合瓶颈。第三重困境是“小体系”运营梗阻。 第二部分&#xff1a;体系矛盾是突围之障一是数据孤岛的障碍。二是投入不足的障碍。三是新旧兼容难的障碍。 第三部分&am…...