Home > Web Front-end > Vue.js > body text

How to add events to input in vue.js

coldplay.xixi
Release: 2020-11-17 18:18:50
Original
3155 people have browsed it

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;
}
}
Copy after login

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!

Related labels:
source:php.cn
Statement of this Website
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
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template