Vue中如何具体实现事件处理操作案例剖析？

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

原文示例讲述了Vue+事件处理操作。以下为简化版：

Vue+事件处理操作示例：

1. 监听事件：使用`v-on`指令监听DOM事件，如点击。

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还可以接收一个需要调用的方法名称。