v-on:绑定事件监听器

简介: v-on:绑定事件监听器

v-on 就是监听事件,可以用v-on指令监听DOM事件来触发一些javascript代码。

v-on 还有一种简单的写法,就是用@代替。

<button @click="jianfen">减分</button>


我们除了绑定click之外,我们还可以绑定其它事件,比如键盘回车事件v-on:keyup.enter,现在我们增加一个输入框,然后绑定回车事件,回车后把文本框里的值加到我们的count上。 绑定事件写法:

<input type="text" v-on:keyup.enter="onEnter" v-model="secondCount">


javascript代码:

onEnter:function(){
     this.count=this.count+parseInt(this.secondCount);
}


因为文本框的数字会默认转变成字符串,所以我们需要用parseInt()函数进行整数转换。

目录
相关文章
|
Java
25JavaWeb基础 - 监听器
25JavaWeb基础 - 监听器
68 1
|
2月前
|
JavaScript 前端开发
除了点击事件,`addEventListener` 还能用于处理哪些事件类型?
【10月更文挑战第29天】 `addEventListener` 能够处理的事件类型非常丰富,涵盖了各种用户交互和页面状态变化的场景,通过合理地使用这些事件类型,可以为网页或应用程序添加丰富多样的交互效果和功能。
|
2月前
|
JavaScript 前端开发
除了 `addEventListener` 方法,还有哪些方式可以为元素添加事件监听器?
【10月更文挑战第29天】虽然存在多种为元素添加事件监听器的方式,但 `addEventListener` 方法因其具有更好的兼容性、灵活性和可维护性,成为了现代JavaScript开发中添加事件监听器的首选方式。在实际项目中,应尽量使用 `addEventListener` 来实现事件绑定,以提高代码的质量和可维护性,并确保在不同浏览器中的一致性表现。
|
5月前
|
JavaScript 前端开发
绑定事件的方法有几种?
绑定事件的方法有几种?
|
8月前
事件监听
事件监听
|
8月前
|
前端开发 JavaScript UED
Vue3中的事件处理:事件绑定、事件修饰符、自定义事件
Vue3中的事件处理:事件绑定、事件修饰符、自定义事件
369 0
|
程序员
监听器
监听器
126 0
|
JavaScript API
js: 添加事件监听addEventListener、移除事件监听removeEventListener
js: 添加事件监听addEventListener、移除事件监听removeEventListener
145 0
|
XML 缓存 NoSQL
事件监听思考
在整合在项目中,我们通常需要基于事件去触发另外的业务逻辑动作的完成。也即在我们做需求时,通常会基于不同的事件码来完成业务处理,此时可以考虑将其单独处理,基于观察者模式+策略模式。还有一种如果当Spring完成Bean的初始化,需要做一些特殊处理,此时除了使用InitializingBean,还可以使用监听完成一些定制化的初始化动作,实现ApplicationListener<ContextRefreshedEvent>。
131 0
事件监听思考
|
JavaScript 前端开发
详细解析DOM事件的event事件对象(二)
详细解析DOM事件的event事件对象(二) 上篇博客说到了DOM的键盘事件和鼠标事件的event对象,这次我们再来聊一聊event对象剩下的属性。 HTML代码: &lt;div class=&quot;box&quot;&gt;1&lt;/div&gt; &lt;div class=&quot;box&quot;&gt;2&lt;/div&gt; &lt;div class=&quot;box&quot;&gt;3&lt;/div&gt; &lt;div class=&quot;box&quot;&gt;4&lt;/div&gt; &lt;div class=&quot;box&quot;&gt;5&lt;/div&gt; 1 2 3 4 5 CSS代码: *{ margin: 0;

热门文章

最新文章