Vue js keydown event example tutorial. In this tutorial, you will learn how to use keydown event in vue js app.
This tutorial will show you example of vue js keydown event, so you can easliy use keydown event in vuejs.
VUE JS KeyDown Event Example
This tutorial will show you example of how to use keydown event in vue js:
Example 1 – KeyDown Event in VUE JS
The following example is for keydown event in vue js:
<!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>
The following code will
<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>
Conclusion
Vue js keydown event example tutorial. In this tutorial, you have learned how to use keydown event in vue js app.
Recommended VUE JS Tutorials