zoukankan      html  css  js  c++  java
  • Vue模板语法——键盘事件修饰符

    一、键盘修饰符

    在JavaScript事件中除了前面所说的事件,还有键盘事件,也经常需要监测常见的键值。在Vue中允许v-on在监听键盘事件时添加关键修饰符。记住所有的keyCode比较困难,所以Vue为最常用的键盘事件提供了别名:
    
    • enter:回车键
    • tab:制表键
    • delete:含delete和backspace键
    • esc:返回键
    • space: 空格键
    • up:向上键
    • down:向下键
    • left:向左键
    • right:向右键

    注意: 键盘修饰符须添加的标签中绑定keyup事件名,之后加上键盘修饰符

    例如: @keyup.修饰符="方法" => @keyup.enter="handle"

        v-on:keyup.修饰符="方法" => `v-on:keyup.enter="handle"`
    

    二、enter修饰符

    1. .enter是点击enter键触发绑定方法

    2. 例子

          <div id="app">
              <form action="" method="post">
                  <div>
                      <input type="text" v-model="uname"/>
                  </div>
                  <div>
                      <input type="password" v-model="pwd" @keyup.enter="handleSubmit"/>
                  </div>
                  <div>
                      <input type="button" @click="handleSubmit" value="提交">
                  </div>
              </form>
          </div>
          <script src="../js/vue.js"></script>
          <script>
              var vm = new Vue({
                  el: "#app",
                  data: {
                      uname:'',
                      pwd:''
                  },
                  methods: {
                      handleSubmit:function(){
                          console.log(this.uname,this.pwd);
                      }
                  }
              })
          </script>
      

      三、delete修饰符

      1. .delete是点击delete键触发绑定方法
      2. 例子
          <div id="app">
              <form action="" method="post">
                  <div>
                      <input type="text" v-model="uname" v-on:keyup.delete="clearContent"/>
                  </div>
                  <div>
                      <input type="password" v-model="pwd" @keyup.enter="handleSubmit"/>
                  </div>
                  <div>
                      <input type="button" @click="handleSubmit" value="提交">
                  </div>
              </form>
          </div>
          <script src="../js/vue.js"></script>
          <script>
              var vm = new Vue({
                  el: "#app",
                  data: {
                      uname:'',
                      pwd:''
                  },
                  methods: {
                      handleSubmit:function(){
                          console.log(this.uname,this.pwd);
                      },
                      clearContent:function(){
                          this.uname = '';
                      }
                  }
              })
          </script>
      
  • 相关阅读:
    final/override控制
    高效遍历图像
    快速初始化成员变量
    C++ boost.python折腾笔记
    百亿数据毫秒响应级交易系统读写分离存储数据设计
    解决VS2010子目录中的.cpp文件引用上一级目录的stdafx.h找不到定义的问题
    生产应用常见坑
    spring AOP应用
    springmvc No mapping found for HTTP request with URI in Dispatc
    myeclipse使用maven插件进行maven install时报错check $m2_home environment variable and mvn script match
  • 原文地址:https://www.cnblogs.com/fpgz99810/p/12511262.html
Copyright © 2011-2022 走看看