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:

   <code class="js">import Vue from 'vue';</code>

2. Create Vue instance:

   <code class="js">const app = new Vue({
     // ...
   });</code>

3. Add image in HTML template:

   <code class="html"><img src="image.png" alt="Image" id="my-image"></code>

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

   <code class="html"><img src="image.png" alt="Image" id="my-image" v-on:click="handleClick"></code>

5. Define handleClick in the Vue instance Method:

   <code class="js">methods: {
     handleClick() {
       // 点击图片时执行的代码
     }
   }</code>

Sample code:

<code class="js">// HTML 模板
<template>
  <img src="image.png" alt="Image" id="my-image" v-on:click="handleClick">
</template>

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

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

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!