Vue 常用的修饰符有哪些

本文介绍了Vue中常用的事件修饰符如.prevent、.stop、.capture等,以及按键修饰符如.up、.down、.ctrl等,展示了如何通过这些修饰符来更精细地控制DOM事件。

Vue 常用的修饰符

按键修饰符

按键修饰符 .up,.down,.ctrl,.enter,.space 等等
语法:@click.修饰符='fn()'

事件修饰符

prevent 修饰符:阻止事件的默认行为(submit 提交表单)
stop 修饰符:阻止事件冒泡
capture 修饰符:与事件冒泡的方向相反,事件捕获由外到内
self:只会触发自己范围内的事件,不包含子元素
once:只会触发一次

注意:修饰符可以串联使用

Vue 中,指令修饰符用于扩展指令的功能,通过 `.` 指明一些指令后缀,不同的后缀封装了不同的处理操作,从而简化代码并增强功能[^1]。 ### 常见的 Vue 指令修饰符及其用途 #### 1. **按键修饰符** 用于监听特定按键事件,例如按下回车键触发操作: ```html <input type="text" @keyup.enter="fn" v-model="log"> ``` 该指令只在按下 **Enter** 键时触发函数 `fn`。[^1] #### 2. **事件修饰符** - **`.prevent`**:阻止默认事件,等同于 `event.preventDefault()`。 ```html <a href="https://example.com" @click.prevent="handleClick">点击</a> ``` - **`.stop`**:阻止事件冒泡,等同于 `event.stopPropagation()`。 ```html <div @click="handleDiv"> <button @click.stop="handleButton">按钮</button> </div> ``` - **`.self`**:只有当事件是从绑定元素本身触发时才触发。 ```html <div @click.self="handleSelf">点击区域</div> ``` - **`.capture`**:事件捕获阶段触发。 ```html <div @click.capture="handleCapture">捕获事件</div> ``` - **`.once`**:事件只触发一次。 ```html <button @click.once="handleOnce">只触发一次</button> ``` - **`.passive`**:提高移动端性能,表示 `event.preventDefault()` 不会被调用。 ```html <div @scroll.passive="handleScroll">滚动</div> ``` #### 3. **鼠标按钮修饰符** - **`.left`**:左键点击触发。 ```html <button @click.left="handleLeft">左键</button> ``` - **`.right`**:右键点击触发。 ```html <button @click.right="handleRight">右键</button> ``` - **`.middle`**:中键点击触发。 ```html <button @click.middle="handleMiddle">中键</button> ``` #### 4. **双向数据绑定修饰符** - **`.lazy`**:将 `input` 事件改为 `change` 事件,减少更新频率。 ```html <input v-model.lazy="message"> ``` - **`.number`**:自动将输入值转换为数字。 ```html <input v-model.number="age"> ``` - **`.trim`**:自动去除输入值的首尾空格。 ```html <input v-model.trim="username"> ``` #### 5. **条件渲染修饰符** - **`.show`**:控制元素的显示与隐藏,通过 `display` 属性切换。 ```html <div v-show="isVisible">显示内容</div> ``` - **`.if`**:根据条件决定是否渲染元素。 ```html <div v-if="isVisible">渲染内容</div> ``` ### 修饰符的应用场景 - **按键修饰符**:用于监听特定按键操作,例如按下回车提交表单。 - **事件修饰符**:用于阻止默认行为或事件冒泡,例如阻止链接跳转或阻止事件冒泡到父元素。 - **鼠标按钮修饰符**:用于区分不同鼠标按键的点击操作,例如右键菜单。 - **双向数据绑定修饰符**:用于优化数据绑定行为,例如自动转换数字或去除空格。 - **条件渲染修饰符**:用于控制元素的显示与隐藏,例如根据用户权限显示特定内容。 修饰符的顺序很重要,例如 `@click.prevent.self` 会阻止所有点击事件,而 `@click.self.prevent` 只会阻止对元素自身的点击[^3]。 ---
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值