Vue_事件修饰符

作用

• 事件修饰符可以限定事件的行为 ，如事件冒泡、事件默认跳转，键盘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>
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23

[7]在组件上设置事件

native
native事件修饰符使用详解