js 清空sessionstorage无效_Vue.js 修饰符 - 系统修饰符

好好学习，天天向上

官方文档

事件处理 — Vue.js​cn.vuejs.org

系统按键指的是 ctrl 、alt 、shift 等按键
像 ctrl 键平常使用并没有什么功能，那常用操作中比如 ctrl + c 是复制等功能作用
为什么对单独的按键做一些修饰符呢，因为系统按键的操作和我们普通的按键操作略有不同，比如像普通按键数字按键 1 2 3 字母按键 a b c，直接点击就可以生成了，在比如特殊的按键 esc 空格 回车等，虽然本身不是用来输入内容的，但是功能也是靠一点击就执行的
但系统往往不会单独使用的，单独点击系统操作符无效，系统按键通常与其他按键组合使用

.ctrl 修饰符

<div id="app">
  <input type="text" @keyup.17.q="fn">
</div>
<script src="lib/vue.js"></script>
<script>
  new Vue({
    el: '#app',
    data: {
    },
    methods: {
      fn (event) {
        console.log(event);
      }
    }
  });
</script>

上部示例是普通按键的操作方式，ctrl 的 keyCode 是17，这里在单独点击 ctrl 和 q 都可以触发操作，并不是想要的效果

<input type="text" @keyup.ctrl="fn">

这个示例，当我们单独点击 ctrl 的时候没有任何操作，但是当加上a b c 这类的操作是可以进行

<input type="text" @keyup.ctrl.q="fn">

这个示例就可以设置只有 ctrl + q 才会去触发

<div id="app">
  <input type="text" @keyup.ctrl.q="fn" v-model="inputValue">
</div>
<script src="lib/vue.js"></script>
<script>
  new Vue({
    el: '#app',
    data: {
      inputValue: ''
    },
    methods: {
      fn (event) {
        // console.log(event);
        this.inputValue = '';
      }
    }
  });
</script>

这个示例就是可以对当前输入内容进行清空，通过 v-model 指令进行双向数据绑定，this去操作当前实例并访问内部储存的数据 inputValue 将这个数据进行清空