VUE3(三)v-bind和v-on

v-on传递参数

    <template id="my-app">
        <!-- 默认传入event对象,可以在方法中获取 -->
        <button @click="btn1Click">按钮1</button>
        <!-- $event可以获取事件发生时的事件对象 -->
        <button @click="bnt2Click($event, 'shopkeeper')">按钮2</button>
    </template>
    <script src="../js/vue.js"></script>
    <script>
        const app={
            template:"#my-app",
            data(){
                return{
                    message: "hello world"
                }
            },
            methods:{
                btn1Click(e){
                    console.log(e);
                },
                bnt2Click(event, name, age){
                    console.log(name,event,age);
                }
            }
        };
        Vue.createApp(app).mount("#app");
    </script>

当参数数量不匹配时,多余参数将被忽略,缺少的参数将会undefined。

发表评论