<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <script src="../js/vue.js"></script> <style> #root { margin-top: 20px; } </style> </head> <!-- --> <body> <div id="root"> <h1>我叫{{name6}}</h1> <input type="text" placeholder="按下回车键提示输入" @keyup.enter="show"> <h1>我叫{{name4}}</h1> <input type="text" placeholder="按下回车键提示输入" @keyup.esc="show"> <h1>我叫{{name1}}</h1> <input type="text" placeholder="按下回车键提示输入" @keyup.delete="show"> <h1>我叫{{name2}}</h1> <input type="text" placeholder="按下回车键提示输入" @keyup.space="show"> <h1>我叫{{name3}}</h1> <input type="text" placeholder="按下回车键提示输入" @keydown.tab="show"> <!-- @keydown.tab tab键特殊 必须配合keydown使用--> </div> <script> const vm = new Vue({ el: "#root", data: { name1: '张三', name2: '李四', name3: '小吴', name4: '小王', name5: '小李', name6: '小明' }, methods: { show(e) { console.log(e.target.value); } } }) </script> </body> </html>
