千峰商城-springboot项目搭建-29-vue按键修饰符

2022-07-08 18:34:08 阅读：110 来源： 互联网

标签：function Vue springboot 修饰符 alert vue 按键 test

按键修饰符就是针对键盘事件的修饰符。限定哪个按键会触发事件。

@keyup.enter：只有点击回车键的时候会触发。
enter、tab、delete、esc、space、up、down、left、right.

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <link rel="stylesheet" href="css/bootstrap.css" />
        <script type="text/javascript" src="js/jquery-1.7.2.min.js"></script>
        <script type="text/javascript" src="js/bootstrap.js"></script>
        <script type="text/javascript" src="js/vue.js"></script>
    </head>
    <body>
        <div id="container">
            <form action="https://www.baidu.com">
                <!--.prevent：消除元素的默认操作-->
                <button type="submit" class="btn btn-success btn-xs" @click.prevent="test">测试</button>
            </form>
            
            <div style="width: 200px;height: 200px; background: red;" @click.self="method1">
                <div style="width: 150px;height: 150px; background: green;" @click="method2">
                    <button type="button" @click.stop="method3">测试</button>
                </div>
            </div>
            
            <input type="text" @keyup.enter="method4" />
                            
        </div>
        
        <script type="text/javascript">
            var vm = new Vue({
                el:"#container",
                data:{
                    
            },
                methods:{
                    
                    test:function(event){
                        console.log("-------test")
                    },
                    method1:function(){
                        alert("1");
                    },
                    method2:function(){
                        alert("2");
                    },
                    method3:function(){
                        alert("3");
                    },
                    method4:function(){
                        alert("4");
                        
                    }
                    
                }
            });
        </script>
        
    </body>
</html>

除了vue提供的按钮别名外，我们还可以根据键盘为按键自定义别名。

Vue.config.keyCodes.aaa = 74

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <link rel="stylesheet" href="css/bootstrap.css" />
        <script type="text/javascript" src="js/jquery-1.7.2.min.js"></script>
        <script type="text/javascript" src="js/bootstrap.js"></script>
        <script type="text/javascript" src="js/vue.js"></script>
    </head>
    <body>
        <div id="container">
            <form action="https://www.baidu.com">
                <!--.prevent：消除元素的默认操作-->
                <button type="submit" class="btn btn-success btn-xs" @click.prevent="test">测试</button>
            </form>
            
            <div style="width: 200px;height: 200px; background: red;" @click.self="method1">
                <div style="width: 150px;height: 150px; background: green;" @click="method2">
                    <button type="button" @click.stop="method3">测试</button>
                </div>
            </div>
            
            <input type="text" @keyup.aaa="method4" />
                            
        </div>
        
        <script type="text/javascript">
            //给键74起个别名
            Vue.config.keyCodes.aaa = 74
            var vm = new Vue({
                el:"#container",
                data:{
                    
            },
                methods:{
                    
                    test:function(event){
                        console.log("-------test")
                    },
                    method1:function(){
                        alert("1");
                    },
                    method2:function(){
                        alert("2");
                    },
                    method3:function(){
                        alert("3");
                    },
                    method4:function(){
                        alert("4");
                        
                    }
                    
                }
            });
        </script>
        
    </body>
</html>

标签：function,Vue,springboot,修饰符,alert,vue,按键,test
来源： https://www.cnblogs.com/lysboke/p/16459345.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

千峰商城-springboot项目搭建-29-vue按键修饰符