作用
- 事件修饰符可以限定事件的行为 ,如事件冒泡、事件默认跳转,键盘enter键;
- 一个事件可以添加多个修饰符
分类
[1]阻止事件的默认行为
语法:@事件类型.prevent
=‘方法名’;
使用场景
- 阻止a标签的点击跳转事件等;
- 阻止表单的默认提交事件;
[2]阻止事件冒泡
语法:@事件名.stop
=‘方法名’
[3]指定键盘enter事件
语法:@事件名.13
=‘方法名’;
- eg:@keydown.13=‘方法名’,只有当按下enter键时事件才会被触发;
- 上下左右分别为37,38,39,40;
[4]去除表单内容的首位空格
语法:v-model.trim='msg'
- 设置双向绑定的时候获取的是文本框内去除空格的内容
[5]将字符串转化为数字
number
[6]文本框失去焦点或者enter键触发
-
lazy
-
<div id="app"> #失去焦点触发的·事件 blur <input type="text" placeholder="请输入你的年龄" @blur="getyearClick" v-model="num" /> </div> <!-- 3.实例话对象VM --> <script> const vm = new Vue({ el: '#app', data: { num: 11 }, methods: { getyearClick () { console.log(this.num) } } }) </script>
-
[7]在组件上设置事件
native
native事件修饰符使用详解