千峰商城-springboot项目搭建-30-vue系统修饰符

组合键

ctrl、alt、shift、meta（windows键）

 

<input type="text" @keyup.ctrl.keyj="method4" />

//给键74起个别名
Vue.config.keyCodes.keyj = 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.ctrl.keyj="method4" />
                            
        </div>
        
        <script type="text/javascript">
            //给键74起个别名
            Vue.config.keyCodes.keyj = 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>

 

 
posted @ 2022-07-08 18:27  临易  阅读(24)  评论(0)  编辑  收藏  举报