How to add touch events to pictures in vue

How to add click events to images in Vue? Import the Vue instance. Create a Vue instance. Add images to HTML templates. Add click events using the v-on:click directive. Define the handleClick method in the Vue instance.

Add a click event to an image in Vue

How to add a click event to an image in Vue?

In Vue, you can use the v-on:click directive to add click events to images.

Detailed steps:

1. Import Vue instance:

   import Vue from 'vue';

2. Create Vue instance:

   const app = new Vue({
     // ...
   });

3. Add image in HTML template:

   <img src="/static/imghwm/default1.png"  data-src="image.png"  class="lazy" alt="Image" id="my-image">

4. Use the v-on:click directive to add a click event:

   <img src="/static/imghwm/default1.png"  data-src="image.png"  class="lazy" alt="Image" id="my-image" v-on:click="handleClick">

5. Define handleClick in the Vue instance Method:

   methods: {
     handleClick() {
       // 点击图片时执行的代码
     }
   }

Sample code:

// HTML 模板


// Vue 实例
<script>
import Vue from 'vue';

export default {
  methods: {
    handleClick() {
      console.log('Image clicked!');
    }
  }
};
</script>

Instructions:

## The
• #v-on:click command will listen for the click event.
• handleClick The method is a function that is triggered when the image is clicked.
In the
• handleClick method, you can write any code that needs to be executed when the image is clicked.

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