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 = 113
props设置自定义标签属性,避免暴露数据,防止污染HTML结构
<input id="uid" title="title1" value="1" :index.prop="index">
修饰符 | 应用场景 |
---|---|
.stop | 阻止事件冒泡 |
.native | 绑定原生事件 |
.once | 事件只执行一次 |
.self | 将事件绑定在自身身上,相当于阻止事件冒泡 |
.prevent | 阻止默认事件 |
.caption | 用于事件捕获 |
.once | 触发一次 |
.keyCode | 监听特定键盘按下 |
.right | 右键 |