v-model的修饰符
v-model.lazy 只有在input输⼊框发⽣⼀个blur时才触发
v-model.number 将⽤户输⼊的字符串转换成number
在input textarea select中使⽤
blur事件在事件处理程序中调⽤ event.preventDefault() 或 event.stopPropagation() 是⾮常常见的需求。尽管我们可以在 methods 中轻松实现这点,但更好的⽅式是:methods 只有纯粹的数据逻辑,⽽不是去处理 DOM 事件细节。
为了解决这个问题, Vue.js 为 v-on 提供了事件修饰符。通过由点(.)表⽰的指令后缀来调⽤修饰符。
.stop
.prevent
.capture
.self
.once
<!-- 阻⽌单击事件冒泡 -->
<a v-on:click.stop="doThis"></a>
<!-- 提交事件不再重载页⾯ -->
<form v-on:submit.prevent="onSubmit"></form>
<!-- 修饰符可以串联 -->
<a v-on:click.stop.prevent="doThat"></a>
<!-- 只有修饰符 -->
<form v-on:submit.prevent></form>
<!-- 添加事件侦听器时使⽤事件捕获模式 -->
<div v-on:click.capture="doThis">...</div>
<!-- 只当事件在该元素本⾝(⽐如不是⼦元素)触发时触发回调 -->
<div v-on:click.self="doThat">...</div>
使⽤修饰符时,顺序很重要;相应的代码会以同样的顺序产⽣。因此,⽤ @click.prevent.self 会阻⽌所有的点击,⽽ @click.self.prevent 只会阻⽌元素上的点击。

版权声明:本站内容均来自互联网,仅供演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198,我们将在24小时内删除。