Skip to content

All topics  /  Vue

Vue Js Keyup Event Example Tutorial

Vue ·

Hi Guys

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

Here, I will give you full example for simply display vue js keyup 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 Keyup 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" @keyup="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...

More on this topic