- Vue.js 3.0从入门到精通(视频教学版)
- 李小威编著
- 307字
- 2022-07-27 18:37:48
5.1.6 v-on
v-on指令用于监听DOM事件,当触发时运行一些JavaScript代码。v-on指令的表达式可以是一般的JavaScript代码,也可以是一个方法的名字或者方法调用语句。
在使用v-on指令对事件进行绑定时,需要在v-on指令后面节上事件名称,例如click、mousedown、mouseup等事件。
【例5.15】v-on指令(源代码\ch05\5.15.html)。
在浏览器中运行程序,单击“+1”按钮或“-1”按钮,即可实现数字的递增和递减;单击“古诗”按钮,触发click事件,调用say()函数,页面效果如图5-25所示。
图5-25 v-on指令
在Vue应用中许多事件处理逻辑会很复杂,所以直接把JavaScript代码写在v-on指令中是不可行的,此时就可以使用v-on接收一个方法,把复杂的逻辑放到这个方法中。
提示
使用v-on指令接收的方法名称也可以传递参数,只需要在methods中定义方法时说明这个形参,即可在方法中获取到。