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中称实数…...
)
Java 语言特性(面试系列1)
一、面向对象编程 1. 封装（Encapsulation） 定义：将数据（属性）和操作数据的方法绑定在一起，通过访问控制符（private、protected、public）隐藏内部实现细节。示例： public …...
Leetcode 3576. Transform Array to All Equal Elements
Leetcode 3576. Transform Array to All Equal Elements 1. 解题思路2. 代码实现 题目链接：3576. Transform Array to All Equal Elements 1. 解题思路 这一题思路上就是分别考察一下是否能将其转化为全1或者全-1数组即可。 至于每一种情况是否可以达到…...
前端导出带有合并单元格的列表
// 导出async function exportExcel(fileName "共识调整.xlsx") {// 所有数据const exportData await getAllMainData();// 表头内容let fitstTitleList [];const secondTitleList [];allColumns.value.forEach(column > {if (!column.children) {fitstTitleL…...
tree 树组件大数据卡顿问题优化
问题背景 项目中有用到树组件用来做文件目录，但是由于这个树组件的节点越来越多，导致页面在滚动这个树组件的时候浏览器就很容易卡死。这种问题基本上都是因为dom节点太多，导致的浏览器卡顿，这里很明显就需要用到虚拟列表的技术&…...
Maven 概述、安装、配置、仓库、私服详解
目录 1、Maven 概述 1.1 Maven 的定义 1.2 Maven 解决的问题 1.3 Maven 的核心特性与优势 2、Maven 安装 2.1 下载 Maven 2.2 安装配置 Maven 2.3 测试安装 2.4 修改 Maven 本地仓库的默认路径 3、Maven 配置 3.1 配置本地仓库 3.2 配置 JDK 3.3 IDEA 配置本地 Ma…...
Linux C语言网络编程详细入门教程：如何一步步实现TCP服务端与客户端通信
文章目录 Linux C语言网络编程详细入门教程：如何一步步实现TCP服务端与客户端通信前言一、网络通信基础概念二、服务端与客户端的完整流程图解三、每一步的详细讲解和代码示例1. 创建Socket（服务端和客户端都要）2. 绑定本地地址和端口&#x…...
【Linux】自动化构建-Make/Makefile
前言 上文我们讲到了Linux中的编译器gcc/g 【Linux】编译器gcc/g及其库的详细介绍-CSDN博客 本来我们将一个对于编译来说很重要的工具：make/makfile 1.背景 在一个工程中源文件不计其数，其按类型、功能、模块分别放在若干个目录中，mak…...
SpringAI实战：ChatModel智能对话全解
一、引言：Spring AI 与 Chat Model 的核心价值 🚀 在 Java 生态中集成大模型能力，Spring AI 提供了高效的解决方案 🤖。其中 Chat Model 作为核心交互组件，通过标准化接口简化了与大语言模型（LLM࿰…...
渗透实战PortSwigger靶场：lab13存储型DOM XSS详解
进来是需要留言的，先用做简单的 html 标签测试 发现面的</h1>不见了 数据包中找到了一个loadCommentsWithVulnerableEscapeHtml.js 他是把用户输入的<>进行 html 编码，输入的<>当成字符串处理回显到页面中，看来只是把用户输…...
ubuntu22.04 安装docker 和docker-compose
首先你要确保没有docker环境或者使用命令删掉docker sudo apt-get remove docker docker-engine docker.io containerd runc安装docker 更新软件环境 sudo apt update sudo apt upgrade下载docker依赖和GPG 密钥 # 依赖 apt-get install ca-certificates curl gnupg lsb-rel…...