1. 全栈程序员必看首页

Vue 修饰符使用总结

全栈程序员-站长 • • 未分类 • 阅读 2

Vue 修饰符使用总结修饰符是 Vue 的重要组成部分 利用好修饰符可以大大地提高开发的效率 v modellazy 修饰符 改变输入框的值时 v model 绑定的值 value 不会改变 当光标离开输入框时才会改变 inputtype text v model lazy value trim 修饰符 类似于 JavaScript 中的 trim 方法 把 v model 绑定的值的首尾空格给过滤掉 inputtype text v model lazy value

修饰符是Vue的重要组成部分，利用好修饰符可以大大地提高开发的效率。

Vue 修饰符使用总结

v-model

lazy 修饰符——改变输入框的值时 v-model绑定的值 value 不会改变，当光标离开输入框时才会改变：

trim 修饰符——类似于JavaScript中的trim()方法，把v-model绑定的值的首尾空格给过滤掉：

number 修饰符——将值转成数字，如果以非数字开头则不生效：

@click

 stop 修饰符——阻止冒泡：

 
  
 
    
  
 methods: { handleClick(num) { console.log(num); } }

 

capture 修饰符——将事件冒泡改为事件捕获：

 
  
 
    
  
 methods: { handleClick(num) { console.log(num); } }

self 修饰符——只有点击事件绑定的本身才会触发事件：

 
  
 
    
  
 methods: { handleClick(num) { console.log(num); } }

 once 修饰符——事件只执行一次：

 
  

    点击 
  
 methods: { handleClick(num) { console.log(num); } }

 prevent 修饰符——阻止默认事件（例如a标签的跳转：

点击 methods: { handleClick(num) { console.log(num); } }

native 修饰符——加在自定义组件的事件上，保证事件能执行：

/ 执行不了 */ 
  
    点击 
   / 可以执行 */ 
  
    点击

left/middle/right 修饰符——鼠标的左中右按键触发的事件： 

 methods: { handleClick(num) { console.log(num); } }

@scroll

passive 修饰符——滚动节流：

 
  

    ...

变量

camel 修饰符——正确识别成小驼峰：

/ 加了canmel viewBox才会被识别成viewBox，否则会被识别成viewbox */

sync 修饰符——简写子组件修改父组件传递的值：

/ 父组件里 */ 
   / 子组件里 */ this.$emit('update:foo', newValue) / 否则需要这样 */ / 父组件里 */ 
   / 子组件里 */ this.$emit('update:foo', newValue)

@keyup & @mousedown

keyCode修饰符——限制成某个按键触发事件：

/ 按 ctrl 触发 */  / 鼠标事件 + 按键 触发 */  / 多按键触发，例如 ctrl + 67 */  Vue提供的keyCode： //普通键 .enter .tab .delete //(捕获“删除”和“退格”键) .space .esc .up .down .left .right //系统修饰键 .ctrl .alt .meta .shift
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请联系我们举报，一经查实，本站将立刻删除。

发布者：全栈程序员-站长，转载请注明出处：https://javaforall.net/222661.html原文链接：https://javaforall.net

赞 (0)
0 0

关于作者

全栈程序员-站长的头像

全栈程序员-站长

133.5K 文章
3 粉丝
本网站汇聚当前互联网主流语音，持续更新，欢迎关注公众号“全栈程序员社区”
上一篇 2026年3月17日 下午3:16
下一篇 2026年3月17日 下午3:16


相关推荐

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注

关注全栈程序员社区公众号