Vue鍵盤事件用法總結(jié)

這兩天學(xué)習(xí)了Vue.js 感覺組件這個地方知識點挺多的，而且很重要，所以，今天添加一點小筆記,學(xué)習(xí)一下Vue鍵盤事件
鍵盤事件

網(wǎng)站建設(shè)公司,為您提供網(wǎng)站建設(shè),網(wǎng)站制作,網(wǎng)頁設(shè)計及定制網(wǎng)站建設(shè)服務(wù),專注于成都企業(yè)網(wǎng)站建設(shè),高端網(wǎng)頁制作,對石涼亭等多個行業(yè)擁有豐富的網(wǎng)站建設(shè)經(jīng)驗的網(wǎng)站建設(shè)公司。專業(yè)網(wǎng)站設(shè)計,網(wǎng)站優(yōu)化推廣哪家好,專業(yè)網(wǎng)站推廣優(yōu)化,H5建站,響應(yīng)式網(wǎng)站。

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title></title>
  <script src="../js/Vue.js" charset="utf-8"></script>
  <script type="text/javascript">
    window.onload = function () {
      var vm = new Vue({
        el: '#box',
        data: {},
        methods: {
          show: function (ev) {
            alert(ev.keyCode)
          }
        }
      });
    }
  </script>
</head>
<body>
<div id="box">
  <input type="text" @keydown="show($event)">
</div>
</body>
</html>

keyCode

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title></title>
  <script src="../js/Vue.js" charset="utf-8"></script>
  <script type="text/javascript">
    window.onload = function () {
      var vm = new Vue({
        el: '#box',
        data: {},
        methods: {
          show: function (ev) {
            if(ev.keyCode==13){
              alert('你按了回車鍵！')
            }
          }
        }
      });
    }
  </script>
</head>
<body>
<div id="box">
  <input type="text" @keyup="show($event)">
</div>
</body>
</html>

keyUp

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title></title>
  <script src="../js/Vue.js" charset="utf-8"></script>
  <script type="text/javascript">
    window.onload = function () {
      var vm = new Vue({
        el: '#box',
        data: {},
        methods: {
          show: function (ev) {
            alert(ev.keyCode)
          }
        }
      });
    }
  </script>
</head>
<body>
<div id="box">
  <input type="text" @keyup="show($event)">
</div>
</body>
</html>

鍵盤事件——簡寫方式

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title></title>
  <script src="../js/Vue.js" charset="utf-8"></script>
  <script type="text/javascript">
    window.onload = function () {
      var vm = new Vue({
        el: '#box',
        data: {},
        methods: {
          show: function () {
            alert('你按了回車！');
          },
          show2: function () {
            alert('你按了回車！');
          },
          show3: function () {
            alert('你按了上鍵！');
          },
          show4: function () {
            alert('你按了下鍵！');
          },
          show5: function () {
            alert('你按了左鍵！');
          },
          show6: function () {
            alert('你按了右鍵！');
          }
        }
      });
    }
  </script>
</head>
<body>
<div id="box">
  <input type="text" @keyup.13="show()">
  <hr>
  <input type="text" @keyup.enter="show2()">
  <hr>
  <input type="text" @keyup.up="show3()">
  <hr>
  <input type="text" @keyup.down="show4()">
  <hr>
  <input type="text" @keyup.left="show5()">
  <hr>
  <input type="text" @keyup.right="show6()">
  <hr>
</div>
</body>
</html>

以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持創(chuàng)新互聯(lián)。

分享名稱：Vue鍵盤事件用法總結(jié)
本文地址：http://bm7419.com/article42/geghhc.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供搜索引擎優(yōu)化、小程序開發(fā)、域名注冊、響應(yīng)式網(wǎng)站、網(wǎng)站內(nèi)鏈、營銷型網(wǎng)站建設(shè)

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)

成都定制網(wǎng)站網(wǎng)頁設(shè)計