Vue 阅读 367
Vue 第2.3章 事件监听@click

Vue 第2.3章 事件监听@click

2026-08-04 • lulubin

我们可以使用 v-on 指令监听 DOM 事件:

https://cyfb.lulublog.cn/images/3/2026/08/hRL11FzP38ff8Xr8K8ZoK83fxif18X.png?sign=5644361a413fc512e235c6361161d772&t=6acd0400

因为其经常使用,v-on 也有一个简写语法:

https://cyfb.lulublog.cn/images/3/2026/08/YCaPriAQJ8LESOSSsmK5O1Lamz61aE.png?sign=03d79a02b42e8e0fc638697f2616b484&t=6acd0400

此处,increment 引用了一个在 script setup 中声明的函数:

https://cyfb.lulublog.cn/images/3/2026/08/W1qZ3HFWwA1aWpzwS284141R0rWU16.png?sign=f95404632ed539d151d439c173bbb952&t=6acd0400

在函数中,我们可以通过修改 ref 来更新组件状态。

事件处理函数也可以使用内置表达式,并且可以使用修饰符简化常见任务。

现在,尝试自行实现 increment 函数并通过使用 v-on 将其绑定到按钮上。

https://cyfb.lulublog.cn/images/3/2026/08/w6gOeOGz6yzy3e1oUjye6OY3v13z66.png?sign=5973d2870f8ef3ced2a110164f6d2d3d&t=6acd0400

打赏

×

感谢您的支持,我会继续努力的!

扫码支持
扫码打赏,你说多少就多少

打开微信扫一扫,即可进行扫码打赏哦