VUE3(三)v-bind和v-on

v-on的修饰符用于对事件就行进一步的处理

例如.stop可以防止子标签接收到的事件再传递给父标签

<template id="my-app">
        <div @click="divClick">
            <button @click.stop="btnClick">按钮</button>
        </div>
    </template>

使用.enter可以限定@keyup仅在输入enter时触发

    <template id="my-app">
        <input type="text" @keyup.enter="keyUp">
    </template>
    <script src="../js/vue.js"></script>
    <script>
        const app={
            template:"#my-app",
            data(){
                return{
                    message: "hello world"
                }
            },
            methods:{
                keyUp(event){
                    console.log("keyUp",event.target.value);
                }
            }
        };
        Vue.createApp(app).mount("#app");
    </script>

发表评论