vue的常用修饰符

.lazy（减少触发次数）

在默认情况下，v-model 在每次 input 事件触发后将输入框的值与数据进行同步 。你可以添加 lazy 修饰符，相当于在onchange事件触发更新

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

.trim（过滤首尾的空格）

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

.number（将值转成数字）

作用是将值转成数字，但是先输入字符串和先输入数字，是两种情况，1是先输入数字的话，只取前面数字部分，2是先输入字母的话，number修饰符无效

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

 

事件修饰符

.stop（阻止点击事件冒泡）

阻止点击事件冒泡。等同于JavaScript中的event.stopPropagation()

.prevent （阻止事件的默认行为）

prevent等同于JavaScript的event.preventDefault()，用于取消默认事件。

.self（ 点击事件绑定的本身才会触发事件）

只会触发自己范围内的事件，不包含子元素，也不会触发父级元素的点击事件。

.once （只触发一次）

只执行一次，如果我们在@click事件上添加.once修饰符，只要点击按钮只会执行一次

<button @click.once="handle()">x</button>

.native （转化为原生事件）

想在某个组件的根元素上监听一个原生事件。可以使用 v-on 的修饰符 .native，vue中写组件的绑定事件的时候，可能有时候会失效，可以尝试下这个，把绑定的事件转换为原生事件