首页
学习
活动
专区
圈层
工具
发布
社区首页 >专栏 >《跟热饭一起学习vue吧》Part.17 事件处理器 v-on

《跟热饭一起学习vue吧》Part.17 事件处理器 v-on

作者头像
我去热饭
发布2022-05-19 16:49:30
发布2022-05-19 16:49:30
3280
举报
文章被收录于专栏:测试开发干货测试开发干货

事件处理器 v-on

我们之前说过,v-on是一个可以带参数指令,不过这样的说法貌似很多同学都觉得别扭,实际上,我们说给一些特殊的属性前面加v-on ,更加便于理解。比如click。

写法举例:

代码语言:javascript
复制
<button v-on:click="函数名"> </button>

那么我们今天要重新学习v-on的真正作用了,它其实就是事件处理器。

什么意思?就是说这里可以关联一些事件,来让这个元素在一些特定动作的时候触发 关联的事件。这些事件一般是表达式,函数等,而函数内则可以做任何事情。

比如这个例子:

通过绑定一个表达式的方法,来改变vue构造器中data变量counter的值,让其自加1。然后p标签内就会实时的显示这个变化。

再来看下面这个例子:

这里我们绑定的变成了一个函数名

下面的例子中,函数带了参数

图中,函数需要一个参数叫message,我们绑定的时候,就需要用函数名+括号的方式把参数带进去。最终这个message被alert弹了出来。注意这里的具体函数内,写的代码依然是传统的js,或者jq。所以大家还是要掌握一定的js/jq基础才可以。

好了本节课就到这里,怎么样,是不是感觉很简单???

本文参与 腾讯云自媒体同步曝光计划,分享自微信公众号。
原始发表:2021-08-10,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 测试开发干货 微信公众号,前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档