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

Vue 常用指令 v-on 自定义参数，事件修饰符

news 2026/4/2 6:10:21

自定义参数就是可以在触发事件的时候传入自定义的值。

文本框，绑定了一个按钮事件，对应的逻辑是sayhi，现在无论按下什么按钮都会触发这个sayhi。但是实际上不是所有的按钮都会触发，只会限定某一些按钮，最常见的按钮就是回车键。

之前跳过js jquery需要通过事件参数来判定触发的按钮是什么才可以限制触发的时机，但是在vue里面直接使用事件修饰符就行了。语法是点，后面跟上修饰符.enter就代表只要在回车键的时候才会触发这个逻辑。

限制触发的按键是回车键，使用事件修饰符，相对于之前需要结合事件参数来判断按下的按键，现在一个点就搞定了，这样更加灵活方便。

事件修饰符有很多，跟上不同的单词就行了。

<!DOCTYPE html>
<html>
<head><meta charset="UTF-8"><title>首页</title><link href="" type="text/css" rel="stylesheet"/><script src="https://unpkg.com/vue@3"></script><style type="text/css"></style>
</head><body>    <div id="vue"><button type="button" @click="btn(666,'lucas',[1,2,3])"  >按钮</button><input type="text" @keyup.enter="sayhi()"></div><script type="text/javascript">const HelloVueApp = {data(){return{counter: 0}},methods:{btn(p1,p2,p3){console.log(p1,p2,p3)},sayhi(){alert("吃了吗")}}} //挂载到html当中Vue.createApp(HelloVueApp).mount('#vue')</script></body></html>

相关文章：

Vue 常用指令 v-on 自定义参数，事件修饰符

自定义参数就是可以在触发事件的时候传入自定义的值。 文本框&#xff0c;绑定了一个按钮事件&#xff0c;对应的逻辑是sayhi&#xff0c;现在无论按下什么按钮都会触发这个sayhi。但是实际上不是所有的按钮都会触发&#xff0c;只会限定某一些按钮&#xff0c;最常见的按钮就…...

编程日记 2023/7/29 18:44:13

重要通知｜关于JumpServer开源堡垒机V2版本产品生命周期的相关说明

JumpServer&#xff08;https://github.com/jumpserver&#xff09;开源项目创立于2014年6月&#xff0c;已经走过了九年的发展历程。经过长期的产品迭代&#xff0c;JumpServer已经成为广受欢迎的开源堡垒机。 JumpServer堡垒机遵循GPL v3开源许可协议&#xff0c;是符合4A&a…...

编程日记 2023/7/29 18:43:12

下载快 kaggle output

下载快 kaggle output 文档&#xff1a;下载快 kaggle output.note 链接&#xff1a;http://note.youdao.com/noteshare?id0e89033f5675252add0a39ee97b6f060&sub63D673D0AD224FC581CC30627B4E2ED8 添加链接描述 但是 数据集下载慢 input 里面下载数据集 也是慢的 数据集…...

编程日记 2023/7/29 18:42:11

结构型设计模式-1.代理设计模式

结构型设计模式-1.代理设计模式 结构型设计模式&#xff1a;利用类与类之间的关系&#xff08;继承、组合&#xff09;&#xff0c;形成一种类与类之间的结构&#xff0c;通过这种结构提高代码的可拓展性、可维护性和可重用性。 一、简介 代理设计模式&#xff08;Proxy Des…...

编程日记 2023/7/29 18:41:09

Python（四十九）获取列表指定元素的索引

❤️ 专栏简介&#xff1a;本专栏记录了我个人从零开始学习Python编程的过程。在这个专栏中&#xff0c;我将分享我在学习Python的过程中的学习笔记、学习路线以及各个知识点。 ☀️ 专栏适用人群 &#xff1a;本专栏适用于希望学习Python编程的初学者和有一定编程基础的人。无…...

编程日记 2023/7/29 18:40:08

年轻人的第一套海景房

前段时间新房装修&#xff0c;我把书房设计成工作室的风格&#xff0c;并自己装配了一台电脑&#xff0c;本文是对电脑选购与装配的一则经验贴&#xff0c;仅包含我对计算机硬件的浅薄理解。 配件选购 装机契源 事实上&#xff0c;很多电脑店都提供装配和测试服务&#xff0c…...

编程日记 2023/7/29 18:39:07

Vue输入内容/链接生成二维码

方式一&#xff1a;qrcode&#xff08;无 icon 图标&#xff09; npm i qrcodejs2 --save完整代码 <template><div class"flex-box"><div>qrcode&#xff08;无 icon 图标&#xff09;</div><div class"qr-code" ref"qrCo…...

编程日记 2023/7/29 18:38:06

使用langchain与你自己的数据对话(二)：向量存储与嵌入

之前我以前完成了“使用langchain与你自己的数据对话(一)&#xff1a;文档加载与切割”这篇博客&#xff0c;没有阅读的朋友可以先阅读一下&#xff0c;今天我们来继续讲解deepleaning.AI的在线课程“LangChain: Chat with Your Data”的第三门课&#xff1a;向量存储与嵌入。 …...

编程日记 2023/7/29 18:37:05

No105.精选前端面试题，享受每天的挑战和学习

文章目录 手写new手写Mapget和post区别发起post请求的时候&#xff0c;服务端是怎么解析你的body的&#xff08;content-type&#xff09;&#xff0c;常见的content-type都有哪些&#xff0c;发文件是怎么解析的&#xff08;FormData&#xff09;&#xff0c;如果多个文件&…...

编程日记 2023/7/29 18:36:01

【计算机网络】第 3 课 - 计算机网络体系结构

欢迎来到博主 Apeiron 的博客&#xff0c;祝您旅程愉快 &#xff01; 时止则止&#xff0c;时行则行。动静不失其时&#xff0c;其道光明。 目录 1、常见的计算机网络体系结构 2、计算机网络体系结构分层的必要性 2.1、物理层 2.2、数据链路层 2.3、网路层 2.4、运输层 2…...

编程日记 2023/7/29 18:34:58

精细呵护：如何维护自己的电脑，提升性能和寿命

导语&#xff1a; 在当今数字化时代&#xff0c;电脑已经成为我们日常生活和工作的必需品。然而&#xff0c;就像任何其他设备一样&#xff0c;电脑需要得到适当的维护和保养&#xff0c;以保持良好的性能和延长使用寿命。在本文中&#xff0c;我们将分享一些简单而有效的方法&…...

编程日记 2023/7/29 18:33:57

DevOps-Jenkins

Jenkins Jenkins是一个可扩展的持续集成引擎&#xff0c;是一个开源软件项目&#xff0c;旨在提供一个开放易用的软件平台&#xff0c;使软件的持续集成变成可能。 官网 应用场景 场景一 研发人员上传开发好的代码到github代码仓库需要将代码下载nginx服务器部署手动下载再…...

编程日记 2023/7/29 18:32:57

Jasper裁员，成也GPT，败也GPT

大家好&#xff01; 我是老洪。 今天来聊一聊人工智能(artificial intelligence)&#xff0c;简称AI。 当前的AI可谓是热火朝天&#xff0c; 自从ChatGPT发布以来&#xff0c;引起了广泛的关注和热情&#xff0c; 许多公司和研究者都试图将其应用于自己的产品或研究中。 按理说…...

编程日记 2023/7/29 18:31:55

安卓开发后台应用周期循环获取位置信息上报服务器

问题背景 最近有需求&#xff0c;在APP启动后&#xff0c;退到后台&#xff0c;还要能实现周期获取位置信息上报服务器&#xff0c;研究了一下实现方案。 问题分析 一、APP退到后台后网络请求实现 APP退到后台后&#xff0c;实现周期循环发送网络请求。目前尝试了两种方案是…...

编程日记 2023/7/29 18:30:53

为什么你的独立站有流量没转化？如何做诊断检查？

新店的创业初期&#xff0c;即使网站有流量&#xff0c;但是销售额为零的情况也常有发生。如果你确定流量是高质量的&#xff0c;寻找阻止潜在客户购买的具体因素可能会感到困难重重。 从“立即购买”按钮的色彩选择这样的细节&#xff0c;到构建品牌故事这样的大计划&#xf…...

编程日记 2023/7/29 18:29:52

【深度学习】【三维重建】windows10环境配置PyTorch3d详细教程

【深度学习】【三维重建】windows10环境配置PyTorch3d详细教程 文章目录 【深度学习】【三维重建】windows10环境配置PyTorch3d详细教程前言确定版本对应关系源码编译安装Pytorch3d总结 前言 本人windows10下使用【Code for Neural Reflectance Surfaces (NeRS)】算法时需要搭…...

编程日记 2023/7/29 18:28:51

【算法和数据结构】257、LeetCode二叉树的所有路径

文章目录 一、题目二、解法三、完整代码 所有的LeetCode题解索引&#xff0c;可以看这篇文章——【算法和数据结构】LeetCode题解。 一、题目 二、解法 思路分析&#xff1a;首先看这道题的输出结果&#xff0c;是前序遍历。然后需要找到从根节点到叶子节点的所有路径&#xff…...

编程日记 2023/7/29 18:27:48

yolov5的后处理解析

由于最近实习项目使用到了yolov5&#xff0c; 发现对yolov5的后处理部分不太熟悉&#xff0c;为防止忘记&#xff0c;这里简单做个记录。 在yolov5里&#xff0c;利用FPN特征金字塔&#xff0c;可以得到三个加强特征层&#xff0c;每一个特征层上每一个特征点存在3个先验框&am…...

编程日记 2023/7/29 18:26:48

Java中注解应用场景

1.Parameter注解 Parameter(names "-browser", description "browser name, supported scope [chrome]", required true) Param注解的用法解析_parameter_fFee-ops的博客-CSDN博客 Public User selectUser(param(“userName”) String name, param(“…...

编程日记 2023/7/29 18:25:45

verilog

数据类型 reg reg [3:0] counter; counter是一个寄存器&#xff0c;这个寄存器有4bit大小&#xff1b; reg [3:0] byte1 [7:0]; 有8个寄存器&#xff0c;每个4bit大小&#xff1b; wire 有符号整数 interge 无符号 reg clk_temp (小数)verilog中称实数…...

编程日记 2023/7/29 18:24:44

Qwen3-14B镜像部署指南：单卡RTX 4090D上快速启用中文大模型推理

Qwen3-14B镜像部署指南&#xff1a;单卡RTX 4090D上快速启用中文大模型推理 1. 镜像概述与核心优势 Qwen3-14B私有部署镜像是专为RTX 4090D显卡优化的中文大模型推理解决方案。这个镜像最大的特点就是"开箱即用"——所有环境依赖、模型权重、优化组件都已预装配置好…...

编程新知 2026/4/2 5:52:02

【数据结构与算法】第19篇：树与二叉树的基础概念

一、什么是树1.1 树的定义树是 n&#xff08;n ≥ 0&#xff09;个节点的有限集合。当 n 0 时称为空树。任意非空树满足&#xff1a;有且仅有一个根节点其余节点可分为 m 个互不相交的子树现实中的例子&#xff1a;文件系统、公司组织架构、网页DOM树。1.2 树的术语画一棵树来…...

编程新知 2026/4/2 3:52:33

CDN 无法播放音视频？流媒体回源与 Range 配置修复

流媒体应用现在越来越普及&#xff0c;CDN&#xff08;内容分发网络&#xff09;早已成为音视频流畅播放的核心支撑——靠边缘节点就近分发&#xff0c;既能降低延迟&#xff0c;又能减轻源站压力&#xff0c;让用户不用长时间等待就能看高清内容。但实际运维中&#xff0c;“C…...

编程新知 2026/4/2 3:40:16

三菱现代自动擦窗机器人PLC软件：后发产品介绍及技术细节

三菱 现代自动擦窗机器人PLC软件 我们主要的后发送的产品有&#xff0c;带解释的梯形图接线图原理图图纸&#xff0c;io分配&#xff0c;组态画面 界面多种组态可供选择上周刚帮一个三菱现代贴牌擦窗机的小客户把新软件迭代完&#xff0c;顺便攒了一套带人话解释的梯形图、不…...

编程新知 2026/4/2 3:34:06

STM32危化品管理系统设计与实现

1. 项目背景与需求分析实验室危化品管理一直是科研机构面临的重要挑战。传统的人工记录方式存在效率低下、容易出错、无法实时监控等问题&#xff0c;尤其对于易燃、易爆或有毒化学品的管理更是隐患重重。我曾参与过多个高校实验室的安全改造项目&#xff0c;亲眼见过因管理不善…...

编程新知 2026/4/2 2:39:04

雷小兔：让学术论文排版变得简单高效

产品概述 雷小兔是一款专门为学生和研究人员设计的学术论文辅助工具。无论你是在准备毕业论文、学位论文还是学术发表&#xff0c;雷小兔都能为你提供全面的支持和帮助。 论文排版方面的核心优势 1. 模板齐全&#xff0c;开箱即用 雷小兔内置了数十种符合国内外高校标准的论…...

编程新知 2026/4/2 2:18:40

OpenClaw未来展望：Qwen3-14B与本地自动化的5个进化方向

OpenClaw未来展望&#xff1a;Qwen3-14B与本地自动化的5个进化方向 1. 从工具到伙伴&#xff1a;OpenClaw的现状与定位 去年冬天&#xff0c;当我第一次在本地MacBook上部署OpenClaw时&#xff0c;它还是个需要手动配置JSON文件才能调用本地模型的"半成品"。如今看…...

编程新知 2026/4/2 1:46:14

别再被@JsonFormat和@DateTimeFormat搞晕了！SpringBoot中时间处理的完整避坑指南

SpringBoot时间格式化终极指南&#xff1a;从JsonFormat到实战避坑 凌晨三点的办公室&#xff0c;咖啡杯已经见底&#xff0c;屏幕上却再次弹出那个熟悉的400错误——"Failed to parse Date value"。这可能是每个Java开发者在处理时间格式时都经历过的噩梦。时间数据…...

编程新知 2026/4/2 1:28:11

合肥艺星12周年超级盛典 以“独1无2”之名，立品质医美新坐标

2026年4月1日,合肥艺星12周年超级盛典正式启幕。十二年,不只是时间的沉淀,更是品牌在品质、技术、服务、标准、态度、团队、城市责任与星品矩阵八大维度上,构建完整“坐标系”的高光时刻。合肥艺星以“独1无2”之姿,向安徽乃至全国医美行业定义出一份关于“独一”的答卷。独1无…...

编程新知 2026/4/2 1:08:01

Agent在零售行业能解决哪些痛点？——深度解析零售企业智能自动化转型路径

在2026年零售行业加速迈向智能化的背景下&#xff0c;AI Agent&#xff08;人工智能智能体&#xff09;已不再仅仅是技术实验室的产物&#xff0c;而是演变为重构行业价值链的核心驱动力。传统的零售运营长期受困于人力密集型模式&#xff0c;面临着全球化运营复杂度高、数据孤…...

编程新知 2026/4/2 0:43:28