目录一、Vue的修饰符是什么二、修饰符的作用1、表单修饰符2、事件修饰符3、鼠标按钮修饰符4、键盘修饰符5、v-bind修饰符三、常用的应用场景一、Vue的修饰符是什么 Vue中的修
Vue中的修饰符分为以下五种：
| 修饰符 | 作用 | 使用 |
|---|---|---|
| lazy | 填完信息，光标离开标签的时候，才会将值赋予给value | <input type="text" v-model.lazy="value"> |
| trim | 自动过滤用户输入的首空格字符，中间的空格不会过滤 | <input type="text" v-model.trim="value"> |
| number | 自动将用户输入的值转为数值类型，如果不能被parseFloat解析，会返回原来的值 | <input v-model.number="age" type="number"> |
| 修饰符 | 作用 | 使用 |
|---|---|---|
| stop | 阻止了事件冒泡 ，相当于调用了event.stopPropagation | <div @click="shout(2)"> <button @click.stop="shout(1)">ok</button> </div>//只输出1 |
| prevent | 阻止了事件的默认行为，相当于调用了event.preventDefault方法 | <fORM v-on:submit.prevent="onSubmit"></form> |
| once | 绑定了事件以后只能触发一次，第二次就不会触发 | <button @click.once="shout(1)">ok</button> |
left左键点击、right右键点击、middle中键点击
<button @click.left="shout(1)">ok</button>
<button @click.right="shout(1)">ok</button>
<button @click.middle="shout(1)">ok</button>
键盘修饰符用来修饰键盘事件（onkeyup,onkeydown）的，有如下：
// 只有按键为keyCode的时候才触发
<input type="text" @keyup.keyCode="shout()">
还可以通过以下方式自定义一些全局的键盘码别名
Vue.config.keyCodes.f2 = 113props设置自定义标签属性，避免暴露数据，防止污染html结构
<input id="uid" title="title1" value="1" :index.prop="index">| 修饰符 | 应用场景 |
|---|---|
| .stop | 阻止事件冒泡 |
| .native | 绑定原生事件 |
| .once | 事件只执行一次 |
| .self | 将事件绑定在自身身上，相当于阻止事件冒泡 |
| .prevent | 阻止默认事件 |
| .caption | 用于事件捕获 |
| .once | 触发一次 |
| .keyCode | 监听特定键盘按下 |
| .right | 右键 |
到此这篇关于Vue常用的修饰符的作用详解的文章就介绍到这了,更多相关Vue修饰符内容请搜索编程网以前的文章或继续浏览下面的相关文章希望大家以后多多支持编程网！
--结束END--
本文标题: Vue常用的修饰符的作用详解
本文链接: https://www.lsjlt.com/news/171815.html(转载时请注明来源链接)
有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341
下载Word文档到电脑，方便收藏和打印～
2024-01-12
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
回答
回答
回答
回答
回答
回答
回答
回答
回答
回答
官方手机版
微信公众号
商务合作
0