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中称实数…...
【SpringBoot】100、SpringBoot中使用自定义注解+AOP实现参数自动解密
在实际项目中，用户注册、登录、修改密码等操作，都涉及到参数传输安全问题。所以我们需要在前端对账户、密码等敏感信息加密传输，在后端接收到数据后能自动解密。 1、引入依赖 <dependency><groupId>org.springframework.boot</groupId><artifactId...
CocosCreator 之 JavaScript/TypeScript和Java的相互交互
引擎版本： 3.8.1 语言： JavaScript/TypeScript、C、Java 环境：Window 参考：Java原生反射机制 您好，我是鹤九日！ 回顾 在上篇文章中：CocosCreator Android项目接入UnityAds 广告SDK。 我们简单讲…...
Android第十三次面试总结（四大 组件基础）
Activity生命周期和四大启动模式详解 一、Activity 生命周期 Activity 的生命周期由一系列回调方法组成，用于管理其创建、可见性、焦点和销毁过程。以下是核心方法及其调用时机： onCreate() 调用时机：Activity 首次创建时调用。…...
HarmonyOS运动开发：如何用mpchart绘制运动配速图表
##鸿蒙核心技术##运动开发##Sensor Service Kit（传感器服务）# 前言 在运动类应用中，运动数据的可视化是提升用户体验的重要环节。通过直观的图表展示运动过程中的关键数据，如配速、距离、卡路里消耗等，用户可以更清晰…...
PAN/FPN
import torch import torch.nn as nn import torch.nn.functional as F import mathclass LowResQueryHighResKVAttention(nn.Module):"""方案 1: 低分辨率特征 (Query) 查询高分辨率特征 (Key, Value).输出分辨率与低分辨率输入相同。"""def __…...
Python Ovito统计金刚石结构数量
大家好，我是小马老师。 本文介绍python ovito方法统计金刚石结构的方法。 Ovito Identify diamond structure命令可以识别和统计金刚石结构，但是无法直接输出结构的变化情况。 本文使用python调用ovito包的方法，可以持续统计各步的金刚石结构，具体代码如下： from ovito…...
AI+无人机如何守护濒危物种？YOLOv8实现95%精准识别
【导读】 野生动物监测在理解和保护生态系统中发挥着至关重要的作用。然而，传统的野生动物观察方法往往耗时耗力、成本高昂且范围有限。无人机的出现为野生动物监测提供了有前景的替代方案，能够实现大范围覆盖并远程采集数据。尽管具备这些优势…...
Python Einops库：深度学习中的张量操作革命
Einops（爱因斯坦操作库）就像给张量操作戴上了一副"语义眼镜"——让你用人类能理解的方式告诉计算机如何操作多维数组。这个基于爱因斯坦求和约定的库，用类似自然语言的表达式替代了晦涩的API调用，彻底改变了深度学习工程…...
Git常用命令完全指南：从入门到精通
Git常用命令完全指南：从入门到精通 一、基础配置命令 1. 用户信息配置 # 设置全局用户名 git config --global user.name "你的名字"# 设置全局邮箱 git config --global user.email "你的邮箱example.com"# 查看所有配置 git config --list…...
Chromium 136 编译指南 Windows篇：depot_tools 配置与源码获取（二）
引言 工欲善其事，必先利其器。在完成了 Visual Studio 2022 和 Windows SDK 的安装后，我们即将接触到 Chromium 开发生态中最核心的工具——depot_tools。这个由 Google 精心打造的工具集，就像是连接开发者与 Chromium 庞大代码库的智能桥梁…...