Vue 常用指令 v-on 自定义参数，事件修饰符
自定义参数就是可以在触发事件的时候传入自定义的值。
文本框，绑定了一个按钮事件，对应的逻辑是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 自定义参数，事件修饰符
自定义参数就是可以在触发事件的时候传入自定义的值。 文本框，绑定了一个按钮事件，对应的逻辑是sayhi，现在无论按下什么按钮都会触发这个sayhi。但是实际上不是所有的按钮都会触发，只会限定某一些按钮，最常见的按钮就…...
重要通知｜关于JumpServer开源堡垒机V2版本产品生命周期的相关说明
JumpServer（https://github.com/jumpserver）开源项目创立于2014年6月，已经走过了九年的发展历程。经过长期的产品迭代，JumpServer已经成为广受欢迎的开源堡垒机。 JumpServer堡垒机遵循GPL v3开源许可协议，是符合4A&a…...
下载快 kaggle output
下载快 kaggle output 文档：下载快 kaggle output.note 链接：http://note.youdao.com/noteshare?id0e89033f5675252add0a39ee97b6f060&sub63D673D0AD224FC581CC30627B4E2ED8 添加链接描述 但是 数据集下载慢 input 里面下载数据集 也是慢的 数据集…...
结构型设计模式-1.代理设计模式
结构型设计模式-1.代理设计模式 结构型设计模式：利用类与类之间的关系（继承、组合），形成一种类与类之间的结构，通过这种结构提高代码的可拓展性、可维护性和可重用性。 一、简介 代理设计模式（Proxy Des…...
Python（四十九）获取列表指定元素的索引
❤️ 专栏简介：本专栏记录了我个人从零开始学习Python编程的过程。在这个专栏中，我将分享我在学习Python的过程中的学习笔记、学习路线以及各个知识点。 ☀️ 专栏适用人群 ：本专栏适用于希望学习Python编程的初学者和有一定编程基础的人。无…...
年轻人的第一套海景房
前段时间新房装修，我把书房设计成工作室的风格，并自己装配了一台电脑，本文是对电脑选购与装配的一则经验贴，仅包含我对计算机硬件的浅薄理解。 配件选购 装机契源 事实上，很多电脑店都提供装配和测试服务，…...
Vue输入内容/链接生成二维码
方式一：qrcode（无 icon 图标） npm i qrcodejs2 --save完整代码 <template><div class"flex-box"><div>qrcode（无 icon 图标）</div><div class"qr-code" ref"qrCo…...
使用langchain与你自己的数据对话(二)：向量存储与嵌入
之前我以前完成了“使用langchain与你自己的数据对话(一)：文档加载与切割”这篇博客，没有阅读的朋友可以先阅读一下，今天我们来继续讲解deepleaning.AI的在线课程“LangChain: Chat with Your Data”的第三门课：向量存储与嵌入。 …...
No105.精选前端面试题，享受每天的挑战和学习
文章目录 手写new手写Mapget和post区别发起post请求的时候，服务端是怎么解析你的body的（content-type），常见的content-type都有哪些，发文件是怎么解析的（FormData），如果多个文件&…...
【计算机网络】第 3 课 - 计算机网络体系结构
欢迎来到博主 Apeiron 的博客，祝您旅程愉快 ！ 时止则止，时行则行。动静不失其时，其道光明。 目录 1、常见的计算机网络体系结构 2、计算机网络体系结构分层的必要性 2.1、物理层 2.2、数据链路层 2.3、网路层 2.4、运输层 2…...
精细呵护：如何维护自己的电脑，提升性能和寿命
导语： 在当今数字化时代，电脑已经成为我们日常生活和工作的必需品。然而，就像任何其他设备一样，电脑需要得到适当的维护和保养，以保持良好的性能和延长使用寿命。在本文中，我们将分享一些简单而有效的方法&…...
DevOps-Jenkins
Jenkins Jenkins是一个可扩展的持续集成引擎，是一个开源软件项目，旨在提供一个开放易用的软件平台，使软件的持续集成变成可能。 官网 应用场景 场景一 研发人员上传开发好的代码到github代码仓库需要将代码下载nginx服务器部署手动下载再…...
Jasper裁员，成也GPT，败也GPT
大家好！ 我是老洪。 今天来聊一聊人工智能(artificial intelligence)，简称AI。 当前的AI可谓是热火朝天， 自从ChatGPT发布以来，引起了广泛的关注和热情， 许多公司和研究者都试图将其应用于自己的产品或研究中。 按理说…...
安卓开发后台应用周期循环获取位置信息上报服务器
问题背景 最近有需求，在APP启动后，退到后台，还要能实现周期获取位置信息上报服务器，研究了一下实现方案。 问题分析 一、APP退到后台后网络请求实现 APP退到后台后，实现周期循环发送网络请求。目前尝试了两种方案是…...
为什么你的独立站有流量没转化？如何做诊断检查？
新店的创业初期，即使网站有流量，但是销售额为零的情况也常有发生。如果你确定流量是高质量的，寻找阻止潜在客户购买的具体因素可能会感到困难重重。 从“立即购买”按钮的色彩选择这样的细节，到构建品牌故事这样的大计划…...
【深度学习】【三维重建】windows10环境配置PyTorch3d详细教程
【深度学习】【三维重建】windows10环境配置PyTorch3d详细教程 文章目录 【深度学习】【三维重建】windows10环境配置PyTorch3d详细教程前言确定版本对应关系源码编译安装Pytorch3d总结 前言 本人windows10下使用【Code for Neural Reflectance Surfaces (NeRS)】算法时需要搭…...
【算法和数据结构】257、LeetCode二叉树的所有路径
文章目录 一、题目二、解法三、完整代码 所有的LeetCode题解索引，可以看这篇文章——【算法和数据结构】LeetCode题解。 一、题目 二、解法 思路分析：首先看这道题的输出结果，是前序遍历。然后需要找到从根节点到叶子节点的所有路径ÿ…...
yolov5的后处理解析
由于最近实习项目使用到了yolov5， 发现对yolov5的后处理部分不太熟悉，为防止忘记，这里简单做个记录。 在yolov5里，利用FPN特征金字塔，可以得到三个加强特征层，每一个特征层上每一个特征点存在3个先验框&am…...
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(“…...
verilog
数据类型 reg reg [3:0] counter; counter是一个寄存器，这个寄存器有4bit大小； reg [3:0] byte1 [7:0]; 有8个寄存器，每个4bit大小； wire 有符号整数 interge 无符号 reg clk_temp (小数)verilog中称实数…...
Ubuntu系统下交叉编译openssl
一、参考资料 OpenSSL&&libcurl库的交叉编译 - hesetone - 博客园 二、准备工作 1. 编译环境 宿主机：Ubuntu 20.04.6 LTSHost：ARM32位交叉编译器：arm-linux-gnueabihf-gcc-11.1.0 2. 设置交叉编译工具链 在交叉编译之前&#x…...
Cesium1.95中高性能加载1500个点
一、基本方式： 图标使用.png比.svg性能要好 <template><div id"cesiumContainer"></div><div class"toolbar"><button id"resetButton">重新生成点</button><span id"countDisplay&qu…...
聊聊 Pulsar：Producer 源码解析
一、前言 Apache Pulsar 是一个企业级的开源分布式消息传递平台，以其高性能、可扩展性和存储计算分离架构在消息队列和流处理领域独树一帜。在 Pulsar 的核心架构中，Producer（生产者） 是连接客户端应用与消息队列的第一步。生产者…...
从深圳崛起的“机器之眼”：赴港乐动机器人的万亿赛道赶考路
进入2025年以来，尽管围绕人形机器人、具身智能等机器人赛道的质疑声不断，但全球市场热度依然高涨，入局者持续增加。 以国内市场为例，天眼查专业版数据显示，截至5月底，我国现存在业、存续状态的机器人相关企…...
1688商品列表API与其他数据源的对接思路
将1688商品列表API与其他数据源对接时，需结合业务场景设计数据流转链路，重点关注数据格式兼容性、接口调用频率控制及数据一致性维护。以下是具体对接思路及关键技术点： 一、核心对接场景与目标 商品数据同步 场景：将1688商品信息…...
基于Docker Compose部署Java微服务项目
一. 创建根项目 根项目（父项目）主要用于依赖管理 一些需要注意的点： 打包方式需要为 pom<modules>里需要注册子模块不要引入maven的打包插件，否则打包时会出问题 <?xml version"1.0" encoding"UTF-8…...
什么？连接服务器也能可视化显示界面？：基于X11 Forwarding + CentOS + MobaXterm实战指南
文章目录 什么是X11？环境准备实战步骤1️⃣ 服务器端配置（CentOS）2️⃣ 客户端配置（MobaXterm）3️⃣ 验证X11 Forwarding4️⃣ 运行自定义GUI程序(Python示例)5️⃣ 成功效果
Spring AI与Spring Modulith核心技术解析
Spring AI核心架构解析 Spring AI（https://spring.io/projects/spring-ai）作为Spring生态中的AI集成框架，其核心设计理念是通过模块化架构降低AI应用的开发复杂度。与Python生态中的LangChain/LlamaIndex等工具类似，但特别为多语…...
音视频——I2S 协议详解
I2S 协议详解 I2S (Inter-IC Sound) 协议是一种串行总线协议，专门用于在数字音频设备之间传输数字音频数据。它由飞利浦（Philips）公司开发，以其简单、高效和广泛的兼容性而闻名。 1. 信号线 I2S 协议通常使用三根或四根信号线&a…...
【SSH疑难排查】轻松解决新版OpenSSH连接旧服务器的“no matching...“系列算法协商失败问题
【SSH疑难排查】轻松解决新版OpenSSH连接旧服务器的"no matching..."系列算法协商失败问题 摘要： 近期，在使用较新版本的OpenSSH客户端连接老旧SSH服务器时，会遇到 "no matching key exchange method found", "n…...