Vue の共通命令 v-on カスタムパラメータとイベント修飾子

カスタムパラメーターは、イベントがトリガーされたときに渡すことができるカスタム値です。

テキストボックスはボタンイベントにバインドされており、対応するロジックは Sayhi です。これで、どのボタンが押されても、この Sayhi がトリガーされます。しかし実際には、すべてのボタンがトリガーされるわけではなく、一部のボタンのみがトリガーされます。最も一般的なボタンは Enter キーです。

js jquery をスキップする前に、イベントパラメーターを使用してトリガーボタンが何であるかを決定し、トリガーのタイミングを制限する必要がありますが、vue ではイベント修飾子を直接使用できます。構文はドットの後に修飾子が続きます。enter は、Enter キーが押されたときにのみこのロジックがトリガーされることを意味します。

トリガーが制限されているキーは Enter キーであり、イベントモディファイアーが使用されているため、以前はイベントパラメーターを組み合わせて押されたキーを判断する必要があったのに比べ、1 点で判断できるようになり、より柔軟で便利になりました。。

イベント修飾子はたくさんありますが、さまざまな単語を覚えておいてください。

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>首页</title>
    <link href="" type="text/css" rel="stylesheet"/>
    <script src="https://unpkg.com/vue@3"></script>
    <style type="text/css">

    </style>
</head>

<body>    
    <div id="vue">
       <button type="button" @click="btn(666,'lucas',[1,2,3])"  >按钮</button>
       <input type="text" @keyup.enter="sayhi()">
    </div>

    <script type="text/javascript">
        const HelloVueApp = {
            data(){
                return{
                    counter: 0
                }
            },
            methods:{
                btn(p1,p2,p3){
                  console.log(p1,p2,p3)
                },
                sayhi(){
                    alert("吃了吗")
                }
            }
        } 
    //挂载到html当中
    Vue.createApp(HelloVueApp).mount('#vue')

    </script>

</body>

</html>

Vue の共通命令 v-on カスタム パラメータとイベント修飾子

おすすめ

Vue の共通命令 v-on カスタムパラメータとイベント修飾子