Vue 模板事件怎么使用 v-on 绑定点击事件触发函数

云磊君_8070

云磊君_8070

2026-10-20

164人浏览

原创

vue中用v-on绑定点击事件需简洁清晰:用@click="handler"并在methods中定义函数;可传$event或自定义参数;推荐方法调用而非复杂内联;支持.prevent、.stop等修饰符增强控制。

vue 模板事件怎么使用 v-on 绑定点击事件触发函数

在 Vue 模板中,用 v-on 绑定点击事件触发函数,核心是写法简洁、逻辑清晰:直接在元素上加 v-on:click="handler" 或简写为 @click="handler",并在对应 Vue 实例或组件的 methods 选项中定义该函数。

基础写法:绑定并触发一个无参函数

这是最常见场景。比如点击按钮弹出提示:

在 methods 中定义函数:

vue-composition-api-best-practices
vue-composition-api-best-practices

Vue 3 组合式 API 与

热门下载

更多
网站特效
/
网站源码
/
网站素材
/
前端模板

精品课程

更多
相关推荐
/
热门推荐
/
最新课程
Vue 教程
Vue 教程

共42课时 | 17.2万人学习

国外Web开发全栈课程全集
国外Web开发全栈课程全集

共12课时 | 1.4万人学习

Vue.js 微实战--十天技能课堂
Vue.js 微实战--十天技能课堂

共18课时 | 1.7万人学习