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>

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/11087.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

【能量管理系统( EMS )】基于粒子群算法对光伏、蓄电池等分布式能源DG进行规模优化调度研究(Matlab代码实现)

&#x1f4a5;&#x1f4a5;&#x1f49e;&#x1f49e;欢迎来到本博客❤️❤️&#x1f4a5;&#x1f4a5; &#x1f3c6;博主优势&#xff1a;&#x1f31e;&#x1f31e;&#x1f31e;博客内容尽量做到思维缜密&#xff0c;逻辑清晰&#xff0c;为了方便读者。 ⛳️座右铭&a…

MyBatis学习笔记之逆向工程

文章目录 逆向工程配置与生成QBC查询风格 所谓的逆向工程是&#xff1a;根据数据库表逆向生成的Java的pojo类、SqlMapper.xml文件、以及mapper接口类等 要完成这个工作&#xff0c;需要借助别人写好的逆向工程插件。 虽然有点经典白学&#xff0c;但好像也没不白学 思考&#x…

【爬虫案例】用Python爬取iPhone14的电商平台评论

用python爬取某电商网站的iPhone14评论数据&#xff0c; 爬取目标&#xff1a; 核心代码如下&#xff1a; 爬取到的5分好评&#xff1a; 爬取到的3分中评&#xff1a; 爬取到的1分差评&#xff1a; 所以说&#xff0c;用python开发爬虫真的很方面&#xff01; 您好&…

基于Java+Springboot+Vue的民宿管理系统(源代码+数据库)092

基于JavaSpringbootVue的民宿管理系统(源代码数据库)092 一、系统介绍 本项目前后端分离 本系统分为管理员、商家、用户三种角色 用户角色包含以下功能&#xff1a; 注册、登录、民宿信息查看、房间信息(查看/预订/评论/收藏/退订/投诉)、在线客服、房间预订管理、房间退订…

基于vue3.0实现vr全景编辑器

随着社会的不断发现&#xff0c;现实生活中有很多时候会使用到全景现实&#xff0c;比如房地产行业vr看房&#xff0c;汽车行业vr看车之类的&#xff0c;全景可视化真实还原了现场的场景&#xff0c;真正做到沉浸式体验。 现在我们基于vue3.0版本开发出了一款沉浸式的编辑器&a…

前后端项目分离开发

问题说明&#xff1a; 开发人员同时负责前端和后端代码开发&#xff0c;分工不明确开发效率低前后端代码混合在一个工程中&#xff0c;不便于管理对开发人员要求高&#xff0c;人员招聘困难 解决方法&#xff1a; 前后端分离开发 介绍 前后端分离开发&#xff0c;就是在项…

Asp.Net 6中使用Log4Net

Asp.Net 6中使用Log4Net 1. 先新建一个ASP.NET Core空项目 2. 通过Nuget包管理器安装下面两个包 log4net Microsoft.Extensions.Logging.Log4Net.AspNetCore 3. 在项目根目录下新建log4net的配置文件log4net.config&#xff0c;并将其设置为始终复制。 <?xml version&quo…

【Spring】IOC的原理

一、 IOC 的概念 Spring 的 IOC &#xff0c;即控制反转&#xff0c;所谓控制反转 —— 本来管理业务对象&#xff08;bean&#xff09;的操作是由我们程序员去做的&#xff0c;但是有了 Spring 核心容器后&#xff0c;这些 Bean 对象的创建和管理交给我们Spring容器去做了&am…

如何选择低代码/零代码平台(最全平台总结)

来谈论这个问题之前&#xff0c;我们先来看看到底什么是低代码/零代码—— 低代码 对于“低代码”的宣传其实已经很久很广泛了&#xff0c;但是争议从来都没有停止。 忘记之前在哪里看到过一个“低代码将会取代程序员”之类的说法&#xff0c;觉得很好笑&#xff0c;看了一些…

【C++】做一个飞机空战小游戏(二)——利用getch()函数实现键盘控制单个字符移动

[导读]本系列博文内容链接如下&#xff1a; 【C】做一个飞机空战小游戏(一)——使用getch()函数获得键盘码值 【C】做一个飞机空战小游戏(二)——利用getch()函数实现键盘控制单个字符移动 在【C】做一个飞机空战小游戏(一)——使用getch()函数获得键盘码值一文中介绍了如何利用…

2023年深圳杯数学建模A题影响城市居民身体健康的因素分析

2023年深圳杯数学建模 A题 影响城市居民身体健康的因素分析 原题再现&#xff1a; 以心脑血管疾病、糖尿病、恶性肿瘤以及慢性阻塞性肺病为代表的慢性非传染性疾病&#xff08;以下简称慢性病&#xff09;已经成为影响我国居民身体健康的重要问题。随着人们生活方式的改变&am…

opencv-18 什么是色彩空间?

1.什么是色彩空间类型&#xff1f; 色彩空间类型&#xff0c;也称为颜色空间类型或色彩模型&#xff0c;是一种表示图像中颜色的方式。在计算机图形学和数字图像处理中&#xff0c;有许多种色彩空间类型&#xff0c;每种类型有不同的表达方式和特点。 常见的色彩空间类型包括&a…

maven

一、为什么需要使用maven 如今我们构建一个项目需要用到很多第三方的类库 &#xff0c;例如我们在开发项目中 需要引入 这些依赖jar包 一个项目Jar包的数量之多往往让我们瞠目结舌&#xff0c;并且Jar包之间的关系非常复杂&#xff0c;一个Jar包往往又会引用其他Jar包&#x…

flex 弹性布局学习

一.Flex布局: Flex是Flexible Box 缩写“弹性布局”,用来为盒状模型提供最大得灵活性。 任何一个容器都可以指定为 Flex 布局。 .box{display: flex; } 行内元素也可以使用 Flex 布局。 .box{display: inline-flex; } Webkit 内核的浏览器&#xff0c;必须加上-webkit前缀。…

微服务模式:业务服务模式

无论是单体应用还是微服务&#xff0c;构建企业应用的业务逻辑/服务在更多方面上都有相似之处而不是差异。在两种方法中&#xff0c;都包含服务、实体、仓库等类。然而&#xff0c;也会发现一些明显的区别。在本文中&#xff0c;我将试图以概念性的方式强调这些区别&#xff0c…

火山引擎VeDI最新分享:消费行业的数据飞轮从“四更”开始

更多技术交流、求职机会&#xff0c;欢迎关注字节跳动数据平台微信公众号&#xff0c;回复【1】进入官方交流群 数据飞轮&#xff0c;正在为消费行业的数字化升级提供一套全新模式。 在刚刚结束的《全链路增长&#xff1a;数据飞轮转动消费新生力》专场活动上&#xff0c;火山引…

MySQL 8.0详细安装配置教程

一. 前言 MySQL是目前最为流行的开源数据库产品&#xff0c;是完全网络化跨平台的关系型数据库系统。它起初是由瑞典MySQLAB公司开发&#xff0c;后来被Oracle公司收购&#xff0c;目前属于Oracle公司。因为开源&#xff0c;所以任何人都能从官网免费下载MySQL软件&#xff0c…

SSIS对SQL Server向Mysql数据转发表数据 (二)

1、在SQL Server数据库创建一个数据库表&#xff1a;users USE [Test1] GO/****** Object: Table [dbo].[users] Script Date: 2023/7/27 16:25:11 ******/ SET ANSI_NULLS ON GOSET QUOTED_IDENTIFIER ON GOCREATE TABLE [dbo].[users]([id] [int] IDENTITY(1,1) NOT NUL…

一些有意思的人工智能发展状况数据

随着大型语言模型&#xff08;LLM&#xff09;的引入&#xff0c;机器学习&#xff08;ML&#xff09;和人工智能&#xff08;AI&#xff09;首次被日常开发人员所使用。这些令人感觉很神奇的应用程序&#xff0c;甚至是拥有数十亿研发支出的&#xff0c;在以前连大型科技公司几…

Vue2基础七、refnextTick自定义指令

零、文章目录 Vue2基础七、ref&nextTick&自定义指令 1、ref **作用&#xff1a;**利用 ref 和 $refs 可以用于 获取 dom 元素, 或 组件实例**特点&#xff1a;**查找范围 → 当前组件内 (更精确稳定)&#xff0c;用document.querySelect(‘.box’) 获取的是整个页面…