vue-按键修饰符

按键修饰符:主要用于监听键盘上的按钮被按下时,可触发对应的事件函数

            v-on:keyup.修饰符.修饰符】、

            .enter

            .tab

            .delete(针对delete和backspace两个按键)

            .esc

            .space

            .esc

            .space

            .up

            .down

            .left

            .right

            系统修饰符必须按下才触发

            .ctrl

            .alt

            .shift

            .meta:mac针对的是command键盘,windows针对的windows键盘(田)

例子代码如下:

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>v-on事件处理指令</title>
</head>
<body><!--v-on 给元素(标签)绑定事件监听器oninput、onclick、onchange、onblur等完整方式`v-on:事件名=“函数/方法”`简写方式`@事件名=“函数/方法”,注意@符号不能加冒号“:”`@input /@click/@change/@blur .....--><div id="app"><!--事件处理方式say未传递参数,则默认会传递DOM原生事件对象--><button v-on:click="say">v-on绑定的时间按钮:{{msg}}</button><!--事件的处理方法say传递了参数,则默认不会传递DOM原生事件对象--><button @click="say(123)">简写@绑定的事件按钮:{{msg}}</button><!--事件的处理方法传递了多个参数,如果需要获取远程DOM事件对象,则必须手动传$event--><button @click="doLog('牛逼',$event)">手动传递DOM事件对象</button><input @blur="doBlur"><!--事件修饰符:.stop 阻止单机事件继续传播 event.stopProgagetion()<div @click="todo"><div @click="doThis"></div></div>.prevent 阻止事件默认行为<a href="**" @click.prevent="**"></a>.once 事件只会触发一次<button @click.once="add">新增+1</button>--><h3>事件修饰符</h3><div @click="todo"><div @click.stop="doThis">单机事件会继续传递</div></div><br><!--默认情况下:会触发点击事件,且会进行页面跳转--><a href="http://www.baidu.com" @click="doStop">默认跳转</a><br><!--.prevent 阻止事件默认行为--><a href="http://www.baidu.com" @click.prevent="doStop">.prevent修饰符-跳转</a><br><button @click="doOnly1">点击事件每次加一{{num1}}</button><br><button @click.once="doOnly">.once修饰符,点击事件只触发一次{{num}}</button><!--按键修饰符:主要用于监听键盘上的按钮被按下时,可触发对应的事件函数v-on:keyup.修饰符.修饰符】、.enter.tab.delete(针对delete和backspace两个按键).esc.space.esc.space.up.down.left.right系统修饰符必须按下才触发.ctrl.alt.shift.meta:mac针对的是command键盘,windows针对的windows键盘(田)    --><h3>按键修饰符</h3><input v-on:keyup.enter="keyEnter" placeholder="监听回车(enter)事件"><input v-on:keyup.delete="keyDelete" placeholder="监听删除(针对delete和backspace两个按键)"><!--Alt + center--><input @keyup.alt.enter="altEnter" placeholder="监听Alt + center"><div @click.ctrl="clickCtrl">Ctrl+点击事件</div><input @keyup.meta.delete="mdt" placeholder="监听田 + delete或backspace两个按键"><input @keyup.ctrl.shift.x="ctrlShiftx" placeholder="ctrlShiftx"></div><script src="./node_modules/vue/dist/vue.global.js"></script><script type="text/javascript">const {createApp} = Vue;const app=createApp({data(){return{msg:"aaa",num:0,num1:0}},//定义方法的选项methods: {say(event){//event 事件对象this.msg="5555"; //this 代表app对象console.log("say something!",event);},//多个必须加逗号doLog(name,event){console.log(name,event);},doBlur(event){console.log('输入框失去焦点',event.target.value); //获取输入框值},doThis(event){console.log("doThis");},todo(event){console.log("todo");},doStop(){alert("doStop!");},doOnly1(){this.num1++;console.log("doOnly1");},doOnly(){this.num++;console.log("doOnly");},keyEnter(){console.log("监听enter按键");},keyDelete(event){console.log("监听delete和backspace两个按键按键",event.keyCode);},altEnter(event){console.log("监听alt和Enter两个组合按键",event.keyCode);},clickCtrl(){console.log("监听clickCtrl",event.keyCode);},mdt(){console.log("监听田 + delete或backspace两个按键",event.keyCode);},ctrlShiftx(){console.log("ctrlShiftx",event.keyCode);}}}).mount("#app");console.log("app",app);</script></body>
</html>

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

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

相关文章

PyTorch入门教学——dir()函数和help()函数的应用

1、简介 已知PyTorch是一个工具包&#xff0c;其中包含许多功能函数。dir()函数和help()函数是学习PyTorch包的重要法宝。 dir()&#xff1a;能让我们知道工具包以及工具包中的分隔区有什么东西。help()&#xff1a;能让我们知道每个工具是如何使用的&#xff0c;即工具的使用…

Rust闭包 - Fn/FnMut/FnOnce traits,捕获和传参

Rust闭包: 是一类能够 捕获周围作用域中变量 的 函数 |参数| {函数体} 参数及返回值类型可推导&#xff0c;无需显示标注类型唯一性&#xff0c;确定后不可更改函数体为单个表达式时&#xff0c;{}可省略 文章目录 引言1 分类 Fn / FnMut / FnOnce2 关键词 move3 闭包作为参数…

React面试题总结(二)

1、说说React中setState和replaceState的区别&#xff1f; 1、setState用于设置状态对象 2、两个参数&#xff1a;nextState&#xff0c;将要设置的新状态&#xff0c;该状态会和当前的state合并&#xff1b;callback&#xff0c;可选参数&#xff0c;回调函数。该函数会在setS…

vscode利用lauch.json和docker中的delve调试本地crdb

---- vscode利用delve调试crdb 创建了一个delve容器用于debug crdbdelve&#xff1a; Delve是一个用于Go编程语言的调试器。它提供了一组命令和功能&#xff0c;可以帮助开发人员在调试过程中检查变量、设置断点、单步执行代码等操作。Delve可以与Go程序一起使用&#xff0c;…

【LLM】浅谈 StreamingLLM中的attention sink和sink token

前言 Softmax函数 SoftMax ( x ) i e x i e x 1 ∑ j 2 N e x j , x 1 ≫ x j , j ∈ 2 , … , N \text{SoftMax}(x)_i \frac{e^{x_i}}{e^{x_1} \sum_{j2}^{N} e^{x_j}}, \quad x_1 \gg x_j, j \in 2, \dots, N SoftMax(x)i​ex1​∑j2N​exj​exi​​,x1​≫xj​,j∈2,……

【爬虫实战】python微博热搜榜Top50

一.最终效果 二.项目代码 2.1 新建项目 本文使用scrapy分布式、多线程爬虫框架编写的高性能爬虫&#xff0c;因此新建、运行scrapy项目3步骤&#xff1a; 1.新建项目: scrapy startproject weibo_hot 2.新建 spider: scrapy genspider hot_search "weibo.com" 3…

揭秘元宇宙背后最炫科技风:数字经济时代,元宇宙发展解决方案及核心技术

文章目录 前言一、关于“元宇宙”业界趋势1.1、元宇宙的概念与发展历程1.2、行业应用体验向虚实融合和实时互动演进1.3、数字内容成为各行业 3D 数字世界入口 二、对于元宇宙发展的解决方案和实践2.1、MetaStudio 构建场景化全栈能力2.2、企业 3D 空间&#xff0c;围绕 4 类场景…

argmin是什么意思

argmin 是一个数学术语&#xff0c;用于表示一个函数在其定义域中取得最小值的参数值&#xff08;自变量的值&#xff09;&#xff0c;而不是最小值本身。 具体来说&#xff0c;argmin 表示函数的自变量&#xff08;通常是一个实数或向量&#xff09;&#xff0c;当输入到该函…

最新ai创作系统CHATGPT系统源码+支持GPT4.0+支持ai绘画(Midjourney)

一、AI创作系统 SparkAi创作系统是基于OpenAI很火的ChatGPT进行开发的Ai智能问答系统AI绘画系统&#xff0c;支持OpenAI GPT全模型国内AI全模型。本期针对源码系统整体测试下来非常完美&#xff0c;可以说SparkAi是目前国内一款的ChatGPT对接OpenAI软件系统。那么如何搭建部署…

【Python从入门到进阶】39、使用Selenium自动验证滑块登录

接上篇《38、selenium关于Chrome handless的基本使用》 上一篇我们介绍了selenium中有关Chrome的无头版浏览器Chrome Handless的使用。本篇我们使用selenium做一些常见的复杂验证功能&#xff0c;首先我们来讲解如何进行滑块自动验证的操作。 一、测试用例介绍 我们要通过sel…

MyBatis底层源码分析

&#x1f384;欢迎来到边境矢梦的csdn博文&#x1f384; &#x1f384;本文主要梳理MyBatis底层源码分析 &#x1f384; &#x1f308;我是边境矢梦&#xff0c;一个正在为秋招和算法竞赛做准备的学生&#x1f308; &#x1f386;喜欢的朋友可以关注一下&#x1faf0;&#x1f…

哪种网站适合物理服务器

哪种网站适合物理服务器 看到独立服务器这一词语&#xff0c;相信大家脑海立马就浮现出了它的种种优势&#xff0c;但是有优势就伴随着也有一定的弊端&#xff0c;比如说它的空间大、特殊的的组件配置&#xff0c;权限配置等&#xff0c;但是成本却非常的高&#xff0c;那么我…

oracle创建数据库,导入dmp操作全家桶

背景&#xff1a;小明在一家IT公司就职&#xff0c;通过查看项目&#xff0c;公司使用的是oracle&#xff0c;几天后&#xff0c;经理要求他从服务器导入数据库到公司服务器&#xff0c;聪明的小明就开始干了起来&#xff0c;整理如下教程。 说明&#xff1a;此次演示环境oracl…

C语言 —— 指针

目录 1. 指针是什么&#xff1f; 2. 指针和指针类型的关系 2.1 指针的解引用 2.2 指针-整数 3. 野指针 3.1 野指针成因 1. 指针未初始化 2. 指针越界访问 3. 指针指向的空间释放 3.2 如何规避野指针 4. 指针运算 4.1 指针-整数 4.2 指针-指针 指针-指针的使用 4.3 指针的关系运…

代码更换了目录,没有任何变更,但Idea编辑器却提示所有代码都变更了?

开发环境&#xff1a; springboot 2.4.3idea 2020 问题描述&#xff1a; 1、代码copy到U盘了&#xff0c;今天用idea打开U盘代码&#xff0c;却提示所有代码都被修改了 2、diff 文件看了&#xff0c;其实并没有任何修改&#xff0c;因为就算不小心误改了&#xff0c;也不能全…

Java进阶篇--公平锁 非公平锁

目录 ReentrantLock的介绍 重入性的实现原理 代码示例&#xff1a; 公平锁与非公平锁 代码示例&#xff1a; ReentrantLock的介绍 ReentrantLock是Java中实现Lock接口的一种重入锁&#xff08;Reentrant Lock&#xff09;实现类。它提供了与synchronized关键字相似的功能…

Stable Diffusion绘画,卡通,教室

1 girl, parted lips, blush, makeup, light smile, school uniform, classroom, light rays, glow, thighs, collarbone, narrow waist, (masterpiece), wallpaper 1个女孩&#xff0c;双唇&#xff0c;腮红&#xff0c;化妆&#xff0c;浅笑&#xff0c;校服&#xff0c;教室…

单链表经典OJ题

目录 ​编辑 题目&#xff1a; 一、移除链表元素&#xff1a; 本质&#xff1a; 解题思路&#xff1a; 本题分为两种解法&#xff1a; 我们使用解法二&#xff1a; 注意事项&#xff1a; 完整代码&#xff1a; 题目&#xff1a; 一、移除链表元素&#xff1a; 本质&…

C++11智能指针

目录 一、什么是智能指针&#xff1f;二、为什么需要智能指针&#xff1f;三、内存泄漏3.1 什么是内存泄漏&#xff1f;内存泄漏的危害是什么&#xff1f;3.2 内存泄漏的分类3.3 如何检测内存泄漏&#xff1f;3.4 如何避免内存泄漏&#xff1f; 四、智能指针的使用及原理4.1 RA…

Kotlin vs Java:为什么Springboot官方教程选择了Kotlin?

导语 作为Java开发者的你&#xff0c;是否在为寻找Java的替代品而烦恼&#xff1f;担心受知识产权问题困扰&#xff1f;别担心&#xff0c;Kotlin来了&#xff01;它是你的救星&#xff0c;也是Springboot官网教程的选择。想知道为什么吗&#xff1f;那就往下翻吧&#xff01;…