Vue：按键函数

使用按键触发函数
方法一：（使用event对象）

判断target 
<!DOCTYPE html>
<html lang="en" xmlns:>
<head>
  <meta charset="UTF-8">
  <!-- 开发环境版本，包含了有帮助的命令行警告 -->
  <script src="js/vue.js"></script>
  <title>Title</title>
</head>
<body>
<div id="firstVue">
  <h1>键盘事件</h1>
  <input type="text" @keyup="showInfo">
</div>
</body>
<script type="text/javascript">
  //关闭生成提示
  Vue.config.productionTip=false;

  let v=new Vue({
    el:"#firstVue",
    data() {
      return {
        main:"VUE"
      }
    },
    methods:{
      showInfo(e){
        //e会默认获得event对象，e.target拿到目标
          alert(e.target.key);
      }
    }
  })
  console.log(v)
</script >
</html>

方法二：（使用vue常用按键别名）

@keyup.enter 
<!DOCTYPE html>
<html lang="en" xmlns:>
<head>
  <meta charset="UTF-8">
  <!-- 开发环境版本，包含了有帮助的命令行警告 -->
  <script src="js/vue.js"></script>
  <title>Title</title>
</head>
<body>
<div id="firstVue">
  <h1>按键</h1>
  <input type="text" @keyup.enter="showInfo">
</div>
</body>
<script type="text/javascript">
  //关闭生成提示
  Vue.config.productionTip=false;

  let v=new Vue({
    el:"#firstVue",
    data() {
      return {
        main:"VUE"
      }
    },
    methods:{
      showInfo(e){
        //console.log(e.key);通过event对象拿东西
        alert(e.target.key);
      }
    }
  })
  console.log(v)
</script >
</html>
posted @ 2021-11-08 14:44  旅祸少年  阅读(173)  评论(0)    收藏  举报