当前位置: 首页 > news >正文

vue学习记录二:修饰符(一):事件修饰符

vue学习记录二:修饰符(一):事件修饰符

  • 一、.stop
  • 二、.prevent
  • 三、.self
  • 四、.native
  • 二、按键修饰符
  • 三、表单操作符

写法

<div @click.stop.prevent ="fn"></div>
//事件修饰符可以连写,且顺序很重要。prevent 在最前面会阻止所有的点击,

一、.stop

1.stop:阻止事件冒泡。只触发最外层 的元素事件。原生js是event.stopPropagation()

二、.prevent

2.prevent:阻止默认行为,一般是阻止a标签的跳转行为。原生js是event.preventDefault()

三、.self

阻止冒泡上来的事件触发这个元素的这个事件。只有点击的是这个元素,才会触发这个元素的事件。

四、.native

触发组件的原生事件。

二、按键修饰符

写法

<div @keyup.enter ="fn"></div>
//事件的keycode表示按键的唯一标识,enter也可以写成数字,相当于那个按键,

1.enter:表示是按的是回车键时才会触发
2.delete:表示delete键和退格键才会触发
3.自定义按键修饰符:

Vue.config.keyCodes.aaa= 65

然后aaa修饰符的值就是65,即按下键盘上的a时才会触发事件。
名字是自定义的,但是值必须是按键对应的那个数字。

三、表单操作符

<input v-model.number ='age' type="number"/>
//控件或取到的值一般都是字符串形式,需要自己再做处理。

1.number:将值转换为数字
2.trim:去除字符串两边空格
3.lazy:将input事件切换为change事件,input事件是每次输入都触发,而change是失去焦点后就会触发。

相关文章:

  • 丝杆支撑座间隙调整不当会带来哪些影响?
  • MySQL 表连接(内连接与外连接)
  • 【加密社】做一个展示币种价格的组件
  • STM32F103_LL库+寄存器学习笔记07 - 串口接收缓冲区非空中断
  • Microi吾码界面设计引擎之基础组件用法大全【内置组件篇·下】
  • Linux Shell(Bash) 快捷键整理
  • 2.2.2 Spark单机版环境
  • JAVA中栈内存溢出问题分析
  • REC一些操作解法
  • WPF 依赖项属性
  • Java8通过Stream对list对象某个属性去重
  • 【计科】从操作系统到虚拟化技术(进程调度,内存映射,设备IO,文件、网络管理)
  • 每日总结3.27
  • linux服务器配置jupyter或python上安装字体
  • 单片机时钟树中RTC和IWDG讲解
  • LeetCode hot 100—零钱兑换
  • Open WebUI自定义OpenWebUI图标
  • 基于springcloud微服务架构的巡游出租管理平台
  • SQL优化 | 精准区分 trace_id、sql_id、plan_id(二)
  • HarmonyOS-ArkUI Navigation (导航组件)-第一部分
  • 免费永久网站建设/哪些网站有友情链接
  • 元旦ppt模板免费下载/seo优化工具大全
  • 英文搜索网站/seo优化排名
  • 怎么查看网站的备案号/今日热搜榜排名
  • 商城定制开发/网站页面关键词优化
  • 网站制作公司业务员/南昌网站seo外包服务