系统修饰符和exact修饰符

系统修饰符指的是通过一些指定的按键配合鼠标点击或者键盘事件进行事件监听。

比如.ctrl系统修饰符的使用

  <div id="app">
        <p>{{a}}</p>
        <button  @click.ctrl='add'>按我加1 </button>
    </div>
    <script src="./js/vue.js"></script>
    <script>
        var vue= new Vue({
            el:"#app",
            data:{
                a:100
            },
            methods: {
                add(){
                    this.a++
                    console.log(this.a)
                }
            }
        })
    </script>

此时按住ctrl健在点击数据才会进行加一操作，否则不会操作

常用的系统修饰符

修饰符名称	对应的键盘键名称
.ctrl	ctrl
.alt	alt
.shfit	shift
.meta	如果是windows系统代表的是键盘的win键，如果是IOS系统，单表的是common键

 

此时有一个问题，如果我们设置了系统修饰符，并不希望有其他的按键组合，比如我们设置ctrl修饰符，此时如果按住ctrl和其他键，然后再点击鼠标，此时也会触发事件监听，所以需要使用其他的修饰符来设置精确匹配事件。

exact修饰符

exact修饰符的作用是辅助其他修饰符进行精确匹配的。

<button  @click.ctrl.exact='add'>按我加1 </button>

方法就是在对应的修饰符的后面进行连续打点。

此时按住ctrl点击进行操作，当按下ctrl的同时在按下其他健，便不会进行操作。