键盘事件/点击事件的传参 





<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <script src="../js/vue.js" type="text/javascript" charset="utf-8"></script>
    </head>
    <body>
        <!--Vue种常用的案按键别名
            回车------enter
            删除------delete(退格和删除)
            退出------esc
            空格------space
            换行------tab(用keydown，keyup会因为换行光标消失执行不了方法)
            上--------up
            下--------down
            左--------left
            右--------right
            2.系统修饰键（用法特殊）：ctrl alt shift meta(win)
                (1).配合keyup使用：按下修饰键的同时，再按下其他键，随后释放其他键，事件才被触发
                (2).配合keydown使用：正常触发事件
            修饰符可以连着写(例如：keyup.ctrl.y  @click.stop.capture)
            @keydown.enter  按下回车显示输入
            -->
        <div id="app">
            <input type="text" name="" id="" value="" placeholder="按下ctrl和y显示输入" @keydown.ctrl.y="showInfo"/>
            <!--点击事件的传参-->
            <button type="button" @click="num">点击</button><!--不传参-->
            <button type="button" @click="num(66,$event)">点击</button><!--传参-->
        </div>
        <script type="text/javascript">
            new Vue({
                el:'#app',
                methods:{
                    showInfo(e){
                        console.log(e.target.value)
                    },
                    num(num,e){
                        console.log(num,e)
                    }
                }
            })
        </script>
    </body>
</html>






 


 




 






            

            
posted @ 
2021-08-17 19:34 
幻影之舞 
阅读(208) 
评论(0) 
 
收藏 
举报