Home  >  Article  >  Web Front-end  >  How to add events to input in vue.js

How to add events to input in vue.js

coldplay.xixi
coldplay.xixiOriginal
2020-11-09 16:49:263154browse

Vue.js method of adding events to input: 1. Use the [v-on] command to add event monitoring, the code is [v-on:eventName="fn"]; 2. Use the callback function Parameter [$event] to trigger the current event.

How to add events to input in vue.js

[Related article recommendations: vue.js]

vue.js for input Method of adding events:

The v-on directive in the vue.js library is used to bind event listeners. The v-on directive can be followed by parameters and modifiers.

Add event listener v-on

(1) Use the v-on command to add event listener, syntax:

v-on:eventName="fn" Can also be abbreviated as @eventName="fn"

(2) The parameter of the callback function $event is the element that currently triggers the event, even if $event is not passed , you can also use the event parameter in the callback function

Example:

<input type="text" id="myInput" @input="inputFunction()">
<p id="demo"> </p>
methods:{
inputFunction(){
let o = document.getElementById("myInput").value
document.getElementById("demo").innerhtml = "你输入的是 :"  + o;
}
}

How to add events to input in vue.js

Note:

In vue, monitor input input Event, the v-on command is used.

v-on: input = "func" or abbreviated as @input = "func"

Related free learning recommendations:javascript(Video)

The above is the detailed content of How to add events to input in vue.js. For more information, please follow other related articles on the PHP Chinese website!

Statement:
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn