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

vue修饰符

news 2025/7/19 6:50:28

表单修饰符

1、lazy

<input type = "text" v-model.lazy = "value">
<p>{{value}}</p>

lazy跟懒加载类似，只有再说鼠标离开光标的时候才会触发，也就是说在input事件的oninput书法的时候不会赋值，当onchange触发的时候才会进行赋值

2、trim

<input type = "text" v-model.trim = "value">

过滤掉输入内容的前后空格

3、number

<input v-model.number = "age" type = "number"

会将输入的值转换为数值类型

事件修饰符

1、stop

<div @click="shout(2)"><button @click.stop="shout(1)">ok</button>
</div> //只输出1

阻止了事件冒泡，相当于调用了event.stopPropagation方法

2、prevent

<form v-on:submit.prevent="onSubmit"></form>

阻止了事件默认行为，相当于调用了event.preventDefault方法

3、self

<div v-on:click.self="doThat">...</div>

只有在event.target是当前元素自身时触发

使用修饰符时，顺序很重要；相应的代码会以同样的顺序产生。因此，用
v-on:click.prevent.self 会阻止所有的点击，而 v-on:click.self.prevent 只会阻止对元素自身的点击

4、once

<button @click.once="shout(1)">ok</button>

绑定的事件只能触发一次

5、capture

 <div @click.capture="shout(1)">obj1<div @click.capture="shout(2)">obj2<div @click="shout(3)">obj3<div @click="shout(4)">obj4</div></div></div></div>
// 输出结构: 1 2 4 3

让事件触发从包含这个元素的顶层开发往下依次触发

6、passive

<!-- 滚动事件的默认行为 (即滚动行为) 将会立即触发 -->
<!-- 而不会等待 `onScroll` 完成 -->
<!-- 这其中包含 `event.preventDefault()` 的情况 -->
<div v-on:scroll.passive="onScroll">...</div>

这个我们以移动端监听元素滚动事件说明，在监听元素滚动事件的时候，会一直触发onscroll事件让页面变的越来越卡，因此在我们使用这个修饰符后，相当于给onscroll事件增加了.lazy修饰符

7、native

<my-component v-on:click.native="doSomething"></my-component>

让组件变成像html内置标签那样监听根元素的原生事件，否则组件上使用v-on只会监听自定义事件

鼠标按钮修饰符

1、left、right、middle

<button @click.left="shout(1)">ok</button>
<button @click.right="shout(1)">ok</button>
<button @click.middle="shout(1)">ok</button>

鼠标按钮修饰符针对的就是鼠标的左键（left）、右键（right）和中键（middle）的点击操作

键盘修饰符

1、enter：回车按键

2、delete：删除按键

3、space：空格按键

4、tab：tab按键

5、esc：esc按键

6、ctrl：ctrl按键

7、shift：shift按键

8、alt：alt按键

9、直接用按键的代码来做修饰符（如：enter为13）

<!-- 键修饰符，键别名 -->
<input @keyup.enter="onEnter">
<!-- 键修饰符，键代码 -->
<input @keyup.13="onEnter">

Vue.config.keyCodes = {v: 86,f1: 112,// camelCase 不可用mediaPlayPause: 179,// 取而代之的是 kebab-case 且用双引号括起来"media-play-pause": 179,up: [38, 87]使用方式：
<input type="text" @keyup.media-play-pause="method">}

v-bind修饰符

async

//父组件
<comp :myMessage="bar" @update:myMessage="func"></comp>
func(e){this.bar = e;
}
//子组件
func2(){this.$emit('update:myMessage',params);
}简写：
//父组件
<comp :myMessage.sync="bar"></comp> 
//子组件
this.$emit('update:myMessage',params);

能对props进行一个双向绑定

注意：