vue中使用v-on监听多个事件的方法

四时之雨

于 2024-04-08 22:00:46 发布

阅读量303

点赞数 1

文章标签： javascript vue.js 开发语言

本文链接：https://blog.youkuaiyun.com/qq_68695044/article/details/137525660

版权

本文介绍了在Vue.js中如何使用v-on指令绑定不同类型的事件（如点击、右击、输入和失去焦点），并展示了相应的事件处理器函数实现。通过实例演示了方法1（处理点击和右键事件）、方法2（处理多个函数的点击事件）和方法3（处理input和blur事件）。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

方法1：

这个方法可以使用多个事件，比如点击事件、右击事件，左边的是事件名称，右边的是方法名称

<el-button type="success" v-on="{'contextmenu':box,'click':click}" round>成功按钮</el-button>
 
const box = () =>{
  console.log(1111);
}
const click = ()=>{
  console.log(2222);
}

方法2：

<button v-on:click="sayHello; sayGoodbye">Click me</button>
 
 
methods: {
        sayHello: function() {
          
        },
        sayGoodbye: function() {
          
        }
      }

方法3：

<input  v-on:input="a"  v-on:blur="b"  />
 
const a = () =>{
    console.log(1111)
}
 
const b = () =>{
    console.log(2222)
}