Vue常用的修饰符的作用详解

一、Vue的修饰符是什么

Vue中的修饰符分为以下五种:

  • 表单修饰符;
  • 事件修饰符;
  • 鼠标按键修饰符;
  • 键值修饰符;
  • v-bind修饰符。

二、修饰符的作用

1、表单修饰符

修饰符作用使用
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">

2、事件修饰符

修饰符作用使用
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>

3、鼠标按钮修饰符

left左键点击、right右键点击、middle中键点击

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

4、键盘修饰符

键盘修饰符用来修饰键盘事件(onkeyup,onkeydown)的,有如下:

  • 普通键(enter、tab、delete、space、esc、up…)
  • 系统修饰键(ctrl、alt、meta、shift)
// 只有按键为keyCode的时候才触发
<input type="text" @keyup.keyCode="shout()">

还可以通过以下方式自定义一些全局的键盘码别名

Vue.config.keyCodes.f2 = 113

5、v-bind修饰符

props设置自定义标签属性,避免暴露数据,防止污染HTML结构

<input id="uid" title="title1" value="1" :index.prop="index">

三、常用的应用场景

修饰符应用场景
.stop阻止事件冒泡
.native绑定原生事件
.once事件只执行一次
.self将事件绑定在自身身上,相当于阻止事件冒泡
.prevent阻止默认事件
.caption用于事件捕获
.once触发一次
.keyCode监听特定键盘按下
.right右键
作者:饭啊饭° 原文地址:https://blog.csdn.net/weixin_44337386/article/details/125434867

%s 个评论

要回复文章请先登录注册