Vue.js中v-on指令的用法介绍

v-on指令

v-on指令在Vue.js中用来绑定事件监听器。事件类型由参数指定。表达式可以是一个方法的名字或一个内联预计，如果没有修饰符也可以省略。

用在普通元素上时，只能监听原生DOM事件。用在自定义元素组件上时，也可以监听子组件触发的自定义事件。

用法：

v-on:事件类型="函数体"

例如：点击按钮的时候执行play事件

点击事件

注意：

在使用v-on指令绑定事件的时候，如果要执行的是无参的函数，函数体可以加括号也可以不加括号，下面的两种写法是等价的：

点击事件

等同于

点击事件

 但是，如果要传递参数，则必须加括号，例如：

点击事件

上面的例子是给play函数传递item参数。

注意：v-on的缩写@

上面的代码等同于下面的代码：

点击事件

代码示例如下：

    
    
    
    
    
    
    


    

         
年龄:{{age}}
         设置年龄为20
         设置年龄为40
         根据参数设置年龄
    

一个按钮也可以同时绑定多个事件，例如：

绑定多个事件

上面我们通过对象的方式绑定多个事件，对象中的键是事件的名称， 值是methods中的成员属性方法

对应的方法：

    
    
    
    
    
    
    


    

         
年龄:{{age}}
         
当前鼠标动作
         设置年龄为20
         设置年龄为40
         根据参数设置年龄

         绑定多个事件
    

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。