Vue事件处理操作实例如何详细解析和应用？

本文共计2337个文字，预计阅读时间需要10分钟。

原文：本文字例讲述了Vue+事件处理操作。分享给大众提供大众参考，具体如下：

1. 监听事件可以使用v-on指令监听DOM事件，并在触发展开时执行JavaScript代码。

2. HTML示例

本文实例讲述了Vue 事件处理操作。分享给大家供大家参考，具体如下：

1 监听事件

可以用 v-on 指令监听 DOM 事件，并在触发时运行一些 JavaScript 代码。

html：

<div id="app1"> <button v-on:click="counter +=1">递增</button> <p>按钮已被点击 {{ counter }} 次。</p> </div>

js：

var app1 = new Vue({ el: "#app1", data: { counter: 0 } });

效果：

2 事件处理方法

然而许多事件处理逻辑会更为复杂，所以直接把 JavaScript 代码写在 v-on 指令中是不可行的。因此v-on还可以接收一个需要调用的方法名称。