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

vue3-input 搜索框

第一种

实现效果

实现代码

<template><div class="input-box mb20"><input type="text" class="input" /><span class="span">搜</span></div>
</template><script setup>
import { onMounted, ref } from "vue";onMounted(() => {});
</script><style lang="scss">
.input-box {position: relative;display: inline-block;
}.input {padding: 0 40px 0 20px;width: 160

相关文章:

vue3-input 搜索框

第一种 实现效果 实现代码 <template><div class="input-box mb20"><input type="text" class="input" /><span class="span">搜</span></div> </template><script setup> import …...

记录eslint报错的情况

这几天在调试vue的eslint&#xff0c;害&#xff0c;我领导说eslint要打开规范代码&#xff0c;顺带看了一下eslint的规则&#xff0c;并且研究一下报错。切记每次修改了.eslintrc配置文件&#xff0c;需要重启项目再查看控制台&#xff0c;否则之前的报错会一直存在。 第一个…...

mongodb多表查询,五个表查询

需求是这样的&#xff0c;而数据是从mysql导入进来的&#xff0c;由于mysql不支持数组类型的数据&#xff0c;所以有很多关联表。药剂里找药物&#xff0c;需要药剂与药物的关联表&#xff0c;然后再找药物表。从药物表里再找药物与成分关联表&#xff0c;最后再找成分表。 这里…...

Git Bash + VS Code + Windows11 Git命令报错莫名奇妙的问题

环境&#xff1a; git version 2.47.0.windows.1 gitbash版本&#xff1a;Git-2.47.0-64-bit windows版本&#xff1a; Windows 11 专业版 版本号 23H2 安装日期 ‎2024/‎11/‎16 操作系统版本 22631.4460 体验 Windows Feature Experience Pack 1000.22700.10…...

湛江市社保卡申领指南:手机获取电子照片回执单号

在湛江市&#xff0c;社保卡的申领流程已经实现了数字化&#xff0c;为市民带来了极大的便利。特别是通过手机获取数码照片回执单号&#xff0c;这一环节更是简化了申领过程。今天&#xff0c;我们将详细介绍如何不去照相馆&#xff0c;利用手机来获取数码照片回执单号&#xf…...

Linux离线安装Docker命令,简单镜像操作

解压安装包 首先&#xff0c;使用 tar 命令解压 docker-27.3.1.tgz 安装包&#xff1a; tar -zxvf docker-27.3.1.tgz 将二进制文件移动到可执行路径上的目录 接着&#xff0c;将解压出来的 Docker 二进制文件复制到系统的可执行路径&#xff08;通常是 /usr/bin/&#xff09…...

【Node.js】Node.js 和浏览器之间的差异

Node.js 是一个强大的运行时环境&#xff0c;它在现代 JavaScript 开发中扮演着重要角色。然而&#xff0c;许多开发者在使用 Node.js 时常常会感到困惑&#xff0c;尤其是与浏览器环境的对比。本文将深入探讨 Node.js 和浏览器之间的差异&#xff0c;帮助你全面理解两者的设计…...

基于MySQL的 CMS(内容管理系统)的表结构设计

目录 1. 用户管理 (Users) 2. 内容管理 (Content/Posts) 3. 分类 (Categories) 4. 标签 (Tags) 5. 内容与分类关系 (Content_Category) 6. 内容与标签关系 (Content_Tag) 7. 媒体库 (Media) 8. 设置 (Settings) 9. 评论 (Comments) 10. 活动日志 (Activity_Log) 11. …...

2.13 转换矩阵

转换矩阵引用了库nalgebra&#xff0c;使用时研究具体实现。 use std::ops;use nalgebra::Perspective3;use crate::Scalar;use super::{Aabb, LineSegment, Point, Triangle, Vector};/// An affine transform #[repr(C)] #[derive(Debug, Clone, Copy, Default)] pub struct…...

【C语言】遗传算法matlab程序

遗传算法matlab程序 遗传算法是一种模拟自然选择过程的优化技术&#xff0c;用于解决复杂问题。在MATLAB中编写遗传算法程序&#xff0c;通常包括以下几个步骤&#xff1a; 初始化种群&#xff1a;创建一个初始解集&#xff08;种群&#xff09;&#xff0c;每个解代表一个问题…...

Java LinkedList 详解

LinkedList 是 Java 集合框架中常用的数据结构之一&#xff0c;位于 java.util 包中。它实现了 List、Deque 和 Queue 接口&#xff0c;是一个双向链表结构&#xff0c;适合频繁的插入和删除操作。 1. LinkedList 的特点 数据结构&#xff1a;基于双向链表实现&#xff0c;每个…...

mac-mini的时间机器,数据备份到alist 中的网盘

苹果的时间机器不能直接将备份存储在 alist 上的网盘&#xff0c;但可以通过一些中间步骤来实现类似的效果&#xff0c;以下是具体介绍&#xff1a; 方法原理 通过将支持 WebDAV 协议的网络存储挂载到本地&#xff0c;再将其设置为时间机器的备份磁盘&#xff0c;从而间接实现…...

【HarmonyOS】鸿蒙应用加载读取csv文件

【HarmonyOS】鸿蒙应用加载读取csv文件 一、问题背景&#xff1a; 1. csv文件是什么&#xff1f; csv是一种文本文件格式&#xff0c;与json类似。会存储一些文本内容&#xff0c;应用需要读取该文件&#xff0c;进行UI内容得填充等。 文件中的数据是以纯文本形式存储的&…...

Java retainAll() 详解

在 Java 中&#xff0c;retainAll() 是 Collection 接口&#xff08;List、Set 等集合类实现该接口&#xff09;的一种方法&#xff0c;用于保留集合中与指定集合交集的元素&#xff0c;删除其他所有元素。 以下是对 retainAll() 方法的详细讲解。 1. 方法定义 方法签名 boo…...

Redis的基本数据类型

初识Redis缓存 Redis缓存&#xff1a; 实际开发中经常使用Redis作为缓存数据库&#xff0c;从而提高数据存取效率&#xff0c;减轻后端数据库的压力。 可以将经常被查询的数据缓存起来&#xff0c;比如热点数据&#xff0c;这样当用户来访问的时候&#xff0c;就不需要到MyS…...

通过vite+vue3+pinia从0到1搭建一个uniapp应用

最近项目上要做一个app&#xff0c;选择了用uniapp作为开发框架&#xff1b;我大概看了一下uniapp的文档&#xff0c;根据文档从0到1搭了一个uniapp应用供大家参考。 因为本人习惯使用了WebStorm编译器&#xff0c;但是uniapp官方推荐使用HBuilder搭建&#xff0c;如果和我一样…...

Linux的桌面

Linux的桌面是可以卸载的 的确&#xff0c;Linux并不像Windows&#xff0c;Linux本身是一个基于命令行的操作系统&#xff0c;在内核眼中&#xff0c;桌面只不过是个普通的应用程序&#xff0c;所以&#xff0c;在Linux的桌面中可以完成的事情&#xff0c;命令行中也基本可以完…...

Easyexcel(5-自定义列宽)

相关文章链接 Easyexcel&#xff08;1-注解使用&#xff09;Easyexcel&#xff08;2-文件读取&#xff09;Easyexcel&#xff08;3-文件导出&#xff09;Easyexcel&#xff08;4-模板文件&#xff09;Easyexcel&#xff08;5-自定义列宽&#xff09; 注解 ColumnWidth Data…...

操作系统实验 C++实现死锁检测算法

实验目的 模拟实现死锁检测算法 实验内容 1、 输入&#xff1a; “资源分配表”文件&#xff0c;每一行包含资源编号、进程编号两项&#xff08;均用整数表示&#xff0c;并用空格分隔开&#xff09;&#xff0c;记录资源分配给了哪个进程。 “进程等待表”文件&…...

小鹏汽车智慧材料数据库系统项目总成数据同步

1、定时任务处理 2、提供了接口 小鹏方面提供的推送的数据表结构&#xff1a; 这几个表总数为100多万&#xff0c;经过条件筛选过滤后大概2万多条数据 小鹏的人给的示例图&#xff1a; 界面&#xff1a; SQL: -- 查询车型 select bmm.md_material_id, bmm.material_num, bm…...

Vue3 + Element Plus + TypeScript中el-transfer穿梭框组件使用详解及示例

使用详解 Element Plus 的 el-transfer 组件是一个强大的穿梭框组件&#xff0c;常用于在两个集合之间进行数据转移&#xff0c;如权限分配、数据选择等场景。下面我将详细介绍其用法并提供一个完整示例。 核心特性与用法 基本属性 v-model&#xff1a;绑定右侧列表的值&…...

深入理解JavaScript设计模式之单例模式

目录 什么是单例模式为什么需要单例模式常见应用场景包括 单例模式实现透明单例模式实现不透明单例模式用代理实现单例模式javaScript中的单例模式使用命名空间使用闭包封装私有变量 惰性单例通用的惰性单例 结语 什么是单例模式 单例模式&#xff08;Singleton Pattern&#…...

376. Wiggle Subsequence

376. Wiggle Subsequence 代码 class Solution { public:int wiggleMaxLength(vector<int>& nums) {int n nums.size();int res 1;int prediff 0;int curdiff 0;for(int i 0;i < n-1;i){curdiff nums[i1] - nums[i];if( (prediff > 0 && curdif…...

postgresql|数据库|只读用户的创建和删除(备忘)

CREATE USER read_only WITH PASSWORD 密码 -- 连接到xxx数据库 \c xxx -- 授予对xxx数据库的只读权限 GRANT CONNECT ON DATABASE xxx TO read_only; GRANT USAGE ON SCHEMA public TO read_only; GRANT SELECT ON ALL TABLES IN SCHEMA public TO read_only; GRANT EXECUTE O…...

mysql已经安装,但是通过rpm -q 没有找mysql相关的已安装包

文章目录 现象&#xff1a;mysql已经安装&#xff0c;但是通过rpm -q 没有找mysql相关的已安装包遇到 rpm 命令找不到已经安装的 MySQL 包时&#xff0c;可能是因为以下几个原因&#xff1a;1.MySQL 不是通过 RPM 包安装的2.RPM 数据库损坏3.使用了不同的包名或路径4.使用其他包…...

Mac下Android Studio扫描根目录卡死问题记录

环境信息 操作系统: macOS 15.5 (Apple M2芯片)Android Studio版本: Meerkat Feature Drop | 2024.3.2 Patch 1 (Build #AI-243.26053.27.2432.13536105, 2025年5月22日构建) 问题现象 在项目开发过程中&#xff0c;提示一个依赖外部头文件的cpp源文件需要同步&#xff0c;点…...

音视频——I2S 协议详解

I2S 协议详解 I2S (Inter-IC Sound) 协议是一种串行总线协议&#xff0c;专门用于在数字音频设备之间传输数字音频数据。它由飞利浦&#xff08;Philips&#xff09;公司开发&#xff0c;以其简单、高效和广泛的兼容性而闻名。 1. 信号线 I2S 协议通常使用三根或四根信号线&a…...

MySQL 知识小结(一)

一、my.cnf配置详解 我们知道安装MySQL有两种方式来安装咱们的MySQL数据库&#xff0c;分别是二进制安装编译数据库或者使用三方yum来进行安装,第三方yum的安装相对于二进制压缩包的安装更快捷&#xff0c;但是文件存放起来数据比较冗余&#xff0c;用二进制能够更好管理咱们M…...

第7篇:中间件全链路监控与 SQL 性能分析实践

7.1 章节导读 在构建数据库中间件的过程中&#xff0c;可观测性 和 性能分析 是保障系统稳定性与可维护性的核心能力。 特别是在复杂分布式场景中&#xff0c;必须做到&#xff1a; &#x1f50d; 追踪每一条 SQL 的生命周期&#xff08;从入口到数据库执行&#xff09;&#…...

pikachu靶场通关笔记19 SQL注入02-字符型注入(GET)

目录 一、SQL注入 二、字符型SQL注入 三、字符型注入与数字型注入 四、源码分析 五、渗透实战 1、渗透准备 2、SQL注入探测 &#xff08;1&#xff09;输入单引号 &#xff08;2&#xff09;万能注入语句 3、获取回显列orderby 4、获取数据库名database 5、获取表名…...