vue修饰符有哪些

　　介绍

小编给大家分享一下vue修饰符有哪些,希望大家阅读完这篇文章之后都有所收获、下面让我们一起去探讨吧!

<强>目录

表单修饰符

事件修饰符

鼠标按键修饰符

键值修饰符

v-bind修饰符(实在不知道叫啥名字)

<强>表单修饰符

填写表单,最常用的是什么?输入! v模型~而我们的修饰符正是为了简化这些东西而存在的

<强>。懒惰的

& lt; div> 　　,,& lt; input 类型=皌ext", v模型=皏alue"比; 　　,,& lt; p> {{value}} & lt;/p> 　　& lt;/div>

从这里我们可以看的到,我们还在输入的时候,光标还在的时候,下面的值就已经出来了,可以说是非常地实时。
但是有时候我们希望,在我们输入完所有东西,光标离开才更新视图。

& lt; div> 　　,,& lt; input 类型=皌ext", v-model.lazy=皏alue"比; 　　,,& lt; p> {{value}} & lt;/p> 　　& lt;/div>

这样即可~这样只有当我们光标离开输入框的时候,它才会更新视图、相当于在onchange事件触发更新。

<强>。修剪

在我们的输入框中,我们经常需要过滤一下一些输入完密码不小心多敲了一下空格的兄弟输入的内容。

& lt; input 类型=皌ext", v-model.trim=皏alue"在

为了让你更清楚的看的到,我改了一下样式,不过问题不大,相信你已经清楚看到这个大大的你好左右两边没有空格,尽管你在输入框里敲烂了空格键。
需要注意的是,它只能<>强过滤首尾的空格强壮!首尾,中间的是不会过滤的

<强>。数

看这个名字就知道,应该是限制输入数字或者输入的东西转换成数字,但不是辣么赶单。

vue修饰符有哪些

如果你先输入数字,那它就会限制你输入的只能是数字。
如果你先输入字符串,那它就相当于没有加.number

事件修饰符

<强>。停止

由于事件冒泡的机制,我们给元素绑定点击事件的时候,也会触发父级的点击事件。

& lt; div  @click=昂?2)“比; 　　& lt;才能button  @click=昂?1)“祝辞ok 　　& lt;/div>//js 　　喊(e) { 　　console.log才能(e) 　　} 　　／/1//2

一键阻止事件冒泡,简直方便得不行。相当于调用了event.stopPropagation()方法。

& lt; div  @click=昂?2)“比; 　　& lt;才能button  @click.stop=昂?1)“祝辞ok 　　& lt;/div>//只输出1

<强> .prevent

用于阻止事件的默认行为,例如,当点击提交按钮时阻止对表单的提交。相当于调用了event.preventDefault()方法。

& lt; !——,提交事件不再重载页面,——比; 　　& lt; form  v: submit.prevent=皁nSubmit"祝辞& lt;/form>

<强>注意:强修饰符可以同时使用多个,但是可能会因为顺序而有所不同。
用v: click.prevent。自我会阻止所有的点击,而v: click.self。阻止只会阻止对元素自身的点击。
也就是<强>从左往右判断~

<强> .self

只当事件是从事件绑定的元素本身触发时才触发回调。像下面所示,刚刚我们从鸡毛蒜皮时候知道子元素会冒泡到父元素导致触发父元素的点击事件,当我们加了这个。自我以后,我们点击按钮不会触发父元素的点击事件呼喊,只有当点击到父元素的时候(蓝色背景)才会喊~从这个自我的英文翻译过来就是“自己,本身的可以看出这个修饰符的用法

& lt; div 类=癰lue", @click.self=昂?2)“比; 　　& lt;才能button  @click=昂?1)“祝辞ok 　　& lt;/div>

<强>。一旦

这个修饰符的用法也是和名字一样简单粗暴,只能用一次,绑定了事件以后只能触发一次,第二次就不会触发。

//键盘按坏都只能喊一次 　　& lt; button  @click.once=昂?1)“祝辞ok

<强> .capture

从上面我们知道了事件的冒泡,其实完整的事件机制是:捕获阶段,目标阶段,冒泡阶段。
默认的呢,是事件触发是从目标开始往上冒泡。
当我们加了这个。以捕获后呢,我们就反过来了,事件触发从包含这个元素的顶层开始往下触发。

,,,& lt; div  @click.capture=昂?1)“比; 　　,,,,其中obj1 　　,,,,,& lt; div  @click.capture=昂?2)“比; 　　,,,,,,methoda 　　,,,,,,,& lt; div  @click=昂?3)“比; 　　,,,,,,,,obj3 　　,,,,,,,,,& lt; div  @click=昂?4)“比; 　　,,,,,,,,,,obj4 　　,,,,,,,,,& lt;/div> 　　,,,,,,,& lt;/div> 　　,,,,,& lt;/div> 　　,,,& lt;/div> 　　,,,//,1,2,4,3

vue修饰符有哪些