【Vue】图片切换
上一篇： vue的指令
https://blog.csdn.net/m0_67930426/article/details/134599378?spm=1001.2014.3001.5502
本篇所需要的指令有： v-on v-bind v-show
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<style>.image img{width: 400px;height: 200px;}
</style><body><!--准备容器 -->
<div id="app"><button v-show="index>0" @click="index--">上一张</button><div class="image"><img v-bind:src="list[index]" alt=""></div><button v-show="index<list.length-1" @click="index++">下一张</button>
</div><!-- 引包 -->
<script src="https://cdn.jsdelivr.net/npm/vue@2.7.14/dist/vue.js"></script><!-- 创建实例 -->
<script>
/* Vue.config.productionTip =false;*/var app=new Vue({el:'#app',data:{index: 1,list:['./images/damo.jpg','./images/direnjie.jpg','./images/hanxin.jpg','./images/juyoujing.jpg','./images/lixin.jpg',]}});
</script>
</body>
</html>使用的指令有 v- show v-bind v-on(@)
<style>.image img{width: 200px;height: 100px;}
</style>将图片的宽设置为400px 高设置了200px
准备了几张图片
点击下一张
相关文章：
【Vue】图片切换
上一篇： vue的指令 https://blog.csdn.net/m0_67930426/article/details/134599378?spm1001.2014.3001.5502 本篇所需要的指令有： v-on v-bind v-show <!DOCTYPE html> <html lang"en"> <head><meta charset"…...
C++模拟如何实现vector的方法
任意位置插入，insert的返回值为新插入的第一个元素位置的迭代器；因为插入可能会进行扩容，导致start的值改变，所以先定义一个变量保存pos与start的相对位置；判断是否需要扩容；从插入位置开始，将所…...
芯知识 | 混音播报语音芯片的优势：革新音频应用的新力量
随着科技的进步，语音芯片在各个领域的应用越来越广泛。而在众多语音芯片中，混音播报语音芯片以其独特的优势，正逐渐成为音频应用领域的翘楚。本文将重点探讨混音播报语音芯片的优势及其在现代科技应用中的价值。 一、混音播报语音芯片概述 …...
Arduino驱动PT100数字K型高温传感器（温湿度传感器）
目录 1、传感器特性 2、控制器和传感器连线图 3、硬件原理图 4、驱动程序 PT100适用于大部分400℃以下高温的测量，但是通常家用天然气灶焰芯温度可达800℃以上，烧制陶瓷的窖子或者大功率电炉温度更可超过1000℃，在这些超高温度的场景下就需要用到K型热电偶。...
【C/PTA —— 11.函数2（课外实践）】
C/PTA —— 11.函数2（课外实践） 一.函数题6-1 计算A[n]1/(1 A[n-1])6-2 递归实现顺序输出整数6-3 自然数的位数(递归版)6-4 分治法求解金块问题6-5 汉诺塔6-6 重复显示字符(递归版)6-7 显示平行四边形(右)(递归版) 二.编程题7-2 N阶楼梯上楼问题 一.函数…...
2023 Unite 大会关于“Muse“ AI 大模型训练
Unity Muse 借助强大的 AI 能力帮助你探索、构思和迭代，其中包括纹理和精灵两项功能，可将自然语言和视觉输入转化为可用资产。 将 AI 引入 Unity Editor 中的 Muse 提供了更快将想法转化为实物的选项。您可以调整并使用文本提示、图案、颜色和草图&…...
Day28|Leetcode 93. 复原 IP 地址 Leetcode 78. 子集 Leetcode 90. 子集 II
Leetcode 93. 复原 IP 地址 题目链接 93 复原 IP 地址 本题目也是分割的典型题目，属于分割回文子串的升级版，大概的思路都是一样的，注意几点，第一个是对ip地址正确与否的条件，第二个插入逗点后，下一个子串…...
【Java 进阶篇】Jedis 操作 String：Redis中的基础数据类型
在Redis中，String是最基础的数据类型之一，而Jedis作为Java开发者与Redis交互的利器，提供了丰富的API来操作String。本文将深入介绍Jedis如何操作Redis中的String类型数据，通过生动的代码示例和详细的解释，让你轻松掌握…...
MySQL 8 配置文件详解与最佳实践
MySQL 8 是一款强大的关系型数据库管理系统，通过适当的配置文件设置，可以充分发挥其性能潜力。在这篇博客中，我们将深入探究 MySQL 8 常用的配置文件，并提供一些建议，帮助您优化数据库性能。 配置文件概览 在 MySQL …...
K8s client go 创建CRD的informer
背景 需要监听K8s中CRD资源的变动, 做出相应的处理, 需要针对 CRD资源建立informer 实现 dynamicClient 是 创建的K8s的client, 这里使用的是 Unstructured 接収的CRD的结果, 加工的时候使用了convertUnstructuredProject 加工了一下, convertUnstructuredProject 实现下面提…...
使用jmx_exporter监控Kafka
prometheus 监控 kafka 常见的有两种开源方案，一种是传统的部署 exporter 的方式，一种是通过 jmx 配置监控，本文将采用第二种方式进行配置。 项目地址： kafka_exporter：https://github.com/danielqsj/kafka_exporterjmx_exporter：https://github.com/prometheus/jmx_expo…...
什么是网络爬虫技术？它的重要用途有哪些？
网络爬虫（Web Crawler）是一种自动化的网页浏览程序，能够根据一定的规则和算法，从互联网上抓取和收集数据。网络爬虫技术是随着互联网的发展而逐渐成熟的一种技术，它在搜索引擎、数据挖掘、信息处理等领域发挥着越来越重…...
Android MemoryFile 共享内存
应用场景： 跨进程传输大数据，如文件、图片等； 技术选型： 共享内存–MemoryFile； 优点： 1. 共享内存没有传输大小限制，所以和应用总的分配内存一样（512MB）࿱…...
【lua】记录函数名和参数（为了延后执行）
需求背景 一个服务缓存玩家信息到对象里，通过对象的函数定时同步到数据库中，如果玩家掉线 清空对象，但是后续步骤导致对象数据需要变更，对象不存在， 就不方便变更了，怎么处理？ 方案思考 1.临…...
2023.11.22 数据仓库2-维度建模
目录 1.数仓建设方案 2.数仓结构图,项目架构图 2.1项目架构图 2.2数仓结构图 3.建模设计 4.维度建模 什么是事实表: 什么是维度表: 数据发展模式y以及对应的模型 5.数仓建设规范 数据库划分规范 表命名规范 表字段类型规范 1.数仓建设方案 ODS: 源数据层(临时存储层) 贴…...
pycharm 创建的django目录和命令行创建的django再使用pycharm打开的目录对比截图 及相关
pytcharm创建django的项目 命令行创建的django 命令行创建项目时 不带路径时 (.venv) D:\gbCode>django-admin startproject gbCode 命令行创建项目时 带路径时 -- 所以如果有目录就指定路径好 (.venv) D:\gbCode>django-admin startproject gbCode d:\gbCode\...
【Pytorch】Visualization of Fature Maps（2）
学习参考来自 使用CNN在MNIST上实现简单的攻击样本https://github.com/wmn7/ML_Practice/blob/master/2019_06_03/CNN_MNIST%E5%8F%AF%E8%A7%86%E5%8C%96.ipynb 文章目录 在 MNIST 上实现简单的攻击样本1 训练一个数字分类网络2 控制输出的概率, 看输入是什么3 让正确的图片分…...
【目标检测】保姆级别教程从零开始实现基于Yolov8的一次性筷子计数
前言 一，环境配置 一，虚拟环境创建 二，安装资源包 前言 最近事情比较少，无意间刷到群聊里分享的基于百度飞浆平台的一次性筷子检测，感觉很有意思，恰巧自己最近在学习Yolov8，于是看看能不能复…...
笔记：内网渗透流程之信息收集
信息收集 首先，收集目标内网的信息，包括子网结构、域名信息、IP地址范围、开放的端口和服务等。这包括通过主动扫描和渗透测试工具收集信息，以及利用公开的信息源进行信息搜集。 本机信息收集 查看系统配置信息 查看系统详细信息…...
【2023.11.23】JDBC基本连接语法学习➹
1.导入jar包依赖：mysql-connector-java-8.0.27.jar 2.连接数据库！ 3.无法解析类->导入java.sql.*，（将项目方言改为Mysql） JDBC，启动！！ public class Main {public static voi…...
SciencePlots——绘制论文中的图片
文章目录 安装一、风格二、1 资源 安装 # 安装最新版 pip install githttps://github.com/garrettj403/SciencePlots.git# 安装稳定版 pip install SciencePlots一、风格 简单好用的深度学习论文绘图专用工具包–Science Plot 二、 1 资源 论文绘图神器来了：一行…...
Swift 协议扩展精进之路：解决 CoreData 托管实体子类的类型不匹配问题（下）
概述 在 Swift 开发语言中，各位秃头小码农们可以充分利用语法本身所带来的便利去劈荆斩棘。我们还可以恣意利用泛型、协议关联类型和协议扩展来进一步简化和优化我们复杂的代码需求。 不过，在涉及到多个子类派生于基类进行多态模拟的场景下，…...
工程地质软件市场：发展现状、趋势与策略建议
一、引言 在工程建设领域，准确把握地质条件是确保项目顺利推进和安全运营的关键。工程地质软件作为处理、分析、模拟和展示工程地质数据的重要工具，正发挥着日益重要的作用。它凭借强大的数据处理能力、三维建模功能、空间分析工具和可视化展示手段&…...
ESP32 I2S音频总线学习笔记（四）： INMP441采集音频并实时播放
简介 前面两期文章我们介绍了I2S的读取和写入，一个是通过INMP441麦克风模块采集音频，一个是通过PCM5102A模块播放音频，那如果我们将两者结合起来，将麦克风采集到的音频通过PCM5102A播放，是不是就可以做一个扩音器了呢…...
python如何将word的doc另存为docx
将 DOCX 文件另存为 DOCX 格式（Python 实现） 在 Python 中，你可以使用 python-docx 库来操作 Word 文档。不过需要注意的是，.doc 是旧的 Word 格式，而 .docx 是新的基于 XML 的格式。python-docx 只能处理 .docx 格式…...
Python 包管理器 uv 介绍
Python 包管理器 uv 全面介绍 uv 是由 Astral（热门工具 Ruff 的开发者）推出的下一代高性能 Python 包管理器和构建工具，用 Rust 编写。它旨在解决传统工具（如 pip、virtualenv、pip-tools）的性能瓶颈，同时…...
C++.OpenGL （14/64）多光源（Multiple Lights）
多光源（Multiple Lights） 多光源渲染技术概览 #mermaid-svg-3L5e5gGn76TNh7Lq {font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;fill:#333;}#mermaid-svg-3L5e5gGn76TNh7Lq .error-icon{fill:#552222;}#mermaid-svg-3L5e5gGn76TNh7Lq .erro…...
人工智能（大型语言模型 LLMs）对不同学科的影响以及由此产生的新学习方式
今天是关于AI如何在教学中增强学生的学习体验，我把重要信息标红了。人文学科的价值被低估了 ⬇️ 转型与必要性 人工智能正在深刻地改变教育，这并非炒作，而是已经发生的巨大变革。教育机构和教育者不能忽视它，试图简单地禁止学生使…...
【JVM面试篇】高频八股汇总——类加载和类加载器
目录 1. 讲一下类加载过程？ 2. Java创建对象的过程？ 3. 对象的生命周期？ 4. 类加载器有哪些？ 5. 双亲委派模型的作用（好处）？ 6. 讲一下类的加载和双亲委派原则？ 7. 双亲委派模…...
tauri项目，如何在rust端读取电脑环境变量
如果想在前端通过调用来获取环境变量的值，可以通过标准的依赖： std::env::var(name).ok() 想在前端通过调用来获取，可以写一个command函数： #[tauri::command] pub fn get_env_var(name: String) -> Result<String, Stri…...