VUE框架按键修饰符在实际开发中的作用解析与效果实现------VUE框架

客官°小女子只卖身不卖艺 2024-02-17 10:49 107阅读 0赞

>     <!DOCTYPE html>
>     <html lang="en">
>     <head>
>         <meta charset="UTF-8">
>         <meta name="viewport" content="width=device-width, initial-scale=1.0">
>         <title>Document</title>
>         <script src="../js/vue.js"></script>
>     </head>
>     <body>
>         <div id="app">
>             <h1>{
>         {msg}}</h1>
>             
>             
>             
>             回车键<input type="password" v-on:keyup.enter="getInfo" placeholder="密码1">
>             <br>
>             回车键<input type="password" v-on:keyup.13="getInfo" placeholder="密码2">
>             <br>
>             
>             
>             tab键<input type="password" v-on:keydown.tab="getInfo">
>             <br>
>             
>             delete<input type="password" v-on:keyup.delete="getInfo">
>             <br>
>             
>             esc<input type="password" v-on:keyup.esc="getInfo">
>             <br>
>             
>             space<input type="password" v-on:keyup.space="getInfo">
>             <br>
>             
>             上<input type="password" v-on:keyup.up="getInfo">
>             <br>
>             
>             下<input type="password" v-on:keyup.down="getInfo">
>             <br>
>             
>             左<input type="password" v-on:keyup.left="getInfo">
>             <br>
>             
>             右<input type="password" v-on:keyup.right="getInfo">
>             <br>
>             
>             
>             
>         </div>
>         <script>
>             const vm = new Vue({
>                 el : "#app",
>                 data : {
>                     msg : "Hello"
>                 },
>                 methods : {
>                     getInfo : function(event)
>                     {
>                         // 识别到键入的值是13代表用户按下了回车键
>                         // if(event.keyCode === 13)
>                         // {
>                             // event是当前发生的事件,我们通过target可以获取事件对象
>                             // 再通过事件对象的value获取用户文本框内的信息
>                             console.log(event.target.value);
>                         // }
>                     }
>                 }
>             });
>         </script>
>     </body>
>     </html>
> 
> <!DOCTYPE html>
> 
> <html lang="en">
> 
> <head>
> 
> <meta charset="UTF-8">
> 
> <meta name="viewport" content="width=device-width, initial-scale=1.0">
> 
> <title>Document</title>
> 
> <script src="../js/vue.js"></script>
> 
> </head>
> 
> <body>
> 
> <div id="app">
> 
> <h1>\{ \{msg\}\}</h1>
> 
> 
> 
> 
> 
> 
> 
> 回车键<input type="password" v-on:keyup.enter="getInfo" placeholder="密码1">
> 
> <br>
> 
> 回车键<input type="password" v-on:keyup.13="getInfo" placeholder="密码2">
> 
> <br>
> 
> 
> 
> 
> 
> tab键<input type="password" v-on:keydown.tab="getInfo">
> 
> <br>
> 
> 
> 
> delete<input type="password" v-on:keyup.delete="getInfo">
> 
> <br>
> 
> 
> 
> esc<input type="password" v-on:keyup.esc="getInfo">
> 
> <br>
> 
> 
> 
> space<input type="password" v-on:keyup.space="getInfo">
> 
> <br>
> 
> 
> 
> 上<input type="password" v-on:keyup.up="getInfo">
> 
> <br>
> 
> 
> 
> 下<input type="password" v-on:keyup.down="getInfo">
> 
> <br>
> 
> 
> 
> 左<input type="password" v-on:keyup.left="getInfo">
> 
> <br>
> 
> 
> 
> 右<input type="password" v-on:keyup.right="getInfo">
> 
> <br>
> 
> 
> 
> 
> 
> 
> 
> </div>
> 
> <script>
> 
> const vm = new Vue(\{
> 
> el : "\#app",
> 
> data : \{
> 
> msg : "Hello"
> 
> \},
> 
> methods : \{
> 
> getInfo : function(event)
> 
> \{
> 
> // 识别到键入的值是13代表用户按下了回车键
> 
> // if(event.keyCode === 13)
> 
> // \{
> 
> // event是当前发生的事件,我们通过target可以获取事件对象
> 
> // 再通过事件对象的value获取用户文本框内的信息
> 
> console.log(event.target.value);
> 
> // \}
> 
> \}
> 
> \}
> 
> \});
> 
> </script>
> 
> </body>
> 
> </html>