vue修饰符(事件修饰符、v-model修饰符、键盘修饰符、自定义键盘修饰符)

事件修饰符

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

<button @click.stop="test"></button>
复制代码

.prevent: 阻止默认行为，相当于调用了 event.preventDefault()方法，比如表单的提交、 a 标签的跳转就是默认事件

<a href="" @click.prevent="test"></a>
复制代码

.self: 只有点击元素本身才会触发。比如一个 div里面有个按钮， div 和按钮都有事件，我们点击按钮， div 绑定的方法也会触发，如果 div的 click 加上 self，只有点击到 div 的时候才会触发，变相的算是阻止冒泡。

<button @click.self="test">...</button>
复制代码

.once: 事件只能触发一次，无论点击多少次，执行第一次之后就不执行了

<button @click.once="test"></button>
复制代码

.captrue: 捕获冒泡，即有冒泡发生时，有该修饰符的dom元素会先执行，如果有多个，从外到内依次执行，然后再按自然顺序执行触发的事件。

<div id="obj1" @click="doc">
    <div id="obj2" @click.capture="doc">
          <div id="obj3" @click.capture="doc">
              <div id="obj4" @click="doc">
                <!-- 点击obj4的时候，弹出的顺序为：obj2、obj3、obj4、obj1；因为2有.captrue修饰符，故而先触发事件，由外到内，然后就是4本身触发，最后冒泡事件。-->
            </div>
          </div>
     </div>
</div>
复制代码

v-model 修饰符

.lazy: 默认情况下，v-model同步输入框的值和数据。可以通过这个修饰符，让光标离开input框数据再同步

<input type="text" v-model.lazy="value">
复制代码

.number: 自动将用户的输入值转化为数值类型

<input v-model.number="value">
复制代码

.trim: 过滤输入框首尾的空格

<input type="text" v-model.trim="value">
复制代码

键盘修饰符

Vue 提供了绝大多数常用的按键码的别名

.enter

.tab

.delete

.esc

.space

.up

.down

.left

.right

自定义键盘修饰符

<input type="text" placeholder="按下F5" @keyup.f5="handle" />
复制代码

顺便推荐下我的小说网站，欢迎收藏哟

虫鱼小说网

知秋小说网