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…

Linux命令记录

常用命令记录 登录到Linux服务器Linux服务器之间传输文件查找文件如何启动tomcat&#xff0c;查找进程、杀进程如何查找端口要设置系统时间Linux关机,重启查看系统,CPU信息后台运行命令 登录到Linux服务器 ssh root10.*.*.*; (后续会提示你输入密码)。Linux服务器之间传输文件 …

MyBatis学习笔记之逆向工程

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

微信小程序打开地图的方法

1、打开内置地图 wx.openLocation({latitude: 31.230416, // 上海的纬度longitude: 121.473701, // 上海的经度name: 上海市, // 地点名称address: 中国上海市黄浦区人民广场, // 地址的详细说明scale: 18, // 缩放比例success: function(res) {console.log(打开地图成功);},f…

【爬虫案例】用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…

874. 模拟行走机器人

874. 模拟行走机器人 机器人在一个无限大小的 XY 网格平面上行走&#xff0c;从点 (0, 0) 处开始出发&#xff0c;面向北方。该机器人可以接收以下三种类型的命令 commands &#xff1a; -2 &#xff1a;向左转 90 度-1 &#xff1a;向右转 90 度1 < x < 9 &#xff1a;…

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

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

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

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

hyperf协程

我们已经知道了协程可以很好的解决异步非阻塞系统的开发问题&#xff0c;那么协程本身到底是什么呢&#xff1f;从定义上来说&#xff0c;协程是一种轻量级的线程&#xff0c;由用户代码来调度和管理&#xff0c;而不是由操作系统内核来进行调度&#xff0c;也就是在用户态进行…

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

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

opencv-18 什么是色彩空间?

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

javadoc注解及maven-javadoc-plugin插件

一、javadoc注解标记&#xff1a; author&#xff1a;作者-类、接口级别 version&#xff1a;版本-类、接口级别 deprecated&#xff1a;不推荐使用的方法 param&#xff1a;方法、构造函数的参数 return&#xff1a;方法的返回类型 see&#xff1a;用于指定参考的内容&am…

maven

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

什么是Apache Kafka?

Apache Kafka是一个开源的分布式事件流平台&#xff0c;用于高性能、可扩展和持久化的数据传输。它最初由LinkedIn公司开发&#xff0c;并于2011年贡献给Apache软件基金会&#xff0c;成为一个顶级开源项目。 Kafka的设计目标是提供一种可靠、高吞吐量的消息传递系统&#xff…

flex 弹性布局学习

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