Vue Js keydown Event Example Tutorial

Vue.Js

Nicesnippets

13406

04-03-2021


Hi Guys

In this example, i will explain you how to use keydown event in vue js,i will show example of vue js keydown event. you can easliy use keydown event in vuejs.we will describing keydown in vue js.

Here, I will give you full example for simply display vue js keydown event example as bellow.

Script Code


<script>

new Vue({

el: "#app",

data: {

keywords: ''

},

methods: {

queryForKeywords(event) {

const value = event.target.value

this.keywords = value

alert('you are enter some key!!');

}

}

})

</script>

Full Example

<!DOCTYPE html>

<html>

<head>

<title>Vue js</title>

<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/5.0.0-alpha1/css/bootstrap.min.css">

<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

</head>

<body class="bg-dark">

<div class="container">

<div class="col-md-6 offset-md-3">

<div class="card mt-5">

<div class="card-header">

<h5>Vue Js keydown Event Example</h5>

</div>

<div class="card-body">

<div id="app">

<p>

{{ keywords }}

</p>

<input type="text" placeholder="Enter KeyWords" :value="keywords" class="form-control" @keydown="queryForKeywords">

</div>

</div>

</div>

</div>

</div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/1.0.18/vue.min.js"></script>

<script>

new Vue({

el: "#app",

data: {

keywords: ''

},

methods: {

queryForKeywords(event) {

const value = event.target.value

this.keywords = value

alert('you are enter some key!!');

}

}

})

</script>

</body>

</html>

It will help you...


Recommended Posts