365体育比分-华为怎么进BT365-365bet娱乐登陆

365bet娱乐登陆

Vue v-on 指令

2026-01-28 14:33:19 作者 admin 阅读 8782
Vue v-on 指令

Vue v-on 指令就像普通 JavaScript 中的事件处理一样,Vue 告诉浏览器:

要监听的事件('click', 'keydown', 'mouseover' 等)事件发生时该怎么办

使用 v-on 的实例让我们看一些例子,看看 v-on 如何与不同的事件和不同的代码一起使用,以便在这些事件发生时运行。

注意:要在事件发生时运行更高级的代码,我们需要引入 Vue 方法。在本教程的下一页了解 Vue 方法。

onclick 事件v-on 指令允许我们根据指定的事件执行操作。

单击元素时,使用 v-on:click 执行操作。

实例v-on 指令用于

运行一下

oninput 事件使用 v-on:input 在元素获得输入时执行操作,就像在文本字段中击键一样。

实例计算输入文本字段的点击次数:

{{ 'Input events occured: ' + inpCount }}

运行一下

mousemove 事件当鼠标指针在元素上移动时,使用 v-on:mousemove 执行操作。

实例每当鼠标指针在

元素上移动时,更改该元素的背景色:

Move the mouse pointer over the box below

运行一下

在 v-for 循环中使用 v-on您也可以在 v-for 循环中使用 v-on 指令。

数组的项可用于 v-on 值内的每次迭代。

实例显示基于食物数组的列表,并为每个项目添加一个点击事件,该事件将使用阵列项目中的值来更改图片的来源。

  1. {{ food.name }}
运行一下

v-on 的简写v-on 的简写方式是 @。

实例我们这里使用 @ 替换 v-on:

运行一下

我们将在本教程稍后开始 @ 使用语法。

相关文章