How to realize the alternation of two images of a picture through Vue?

How to realize the alternation of two images in a picture through Vue?

In web development, it is often necessary to display multiple pictures on the page, and it is hoped that the pictures can be displayed alternately to increase the dynamic effect and attractiveness of the page. Under the Vue framework, we can use some simple code to achieve the alternation of two images in the picture.

First, we create a Vue instance and define two image paths in the data of the Vue instance.

<div id="app">
  <img src="/static/imghw/default1.png"  data-src="currentImage"  class="lazy"  : alt="Image">
</div>

new Vue({
  el: '#app',
  data: {
    image1: 'path/to/image1.jpg',
    image2: 'path/to/image2.jpg',
    currentImage: '',
    timer: null
  },
  mounted() {
    this.startImageRotation();
  },
  methods: {
    startImageRotation() {
      // 初始化当前图片为第一张图片
      this.currentImage = this.image1;
      // 设置定时器，每两秒切换一次图片
      this.timer = setInterval(() => {
        this.toggleImage();
      }, 2000);
    },
    toggleImage() {
      // 判断当前显示的是哪张图片
      if (this.currentImage === this.image1) {
        this.currentImage = this.image2;
      } else {
        this.currentImage = this.image1;
      }
    }
  },
  beforeDestroy() {
    // 清除定时器，防止页面销毁后仍然执行定时器的代码
    clearInterval(this.timer);
  }
});

In the above code, we defined two image paths in the data of the Vue instance, namely image1 and image2. In the mounted life cycle hook function of the Vue instance, we call the startImageRotation method to initialize the switching of images, and determine the currently displayed image in the toggleImage method, Then make the switch. Through the setInterval function and timer, set the image to switch every two seconds.

Finally, in the beforeDestroy life cycle hook function of the Vue instance, we clear the timer to prevent the timer code from still being executed after the page is destroyed, ensuring the normal unloading of the page.

Through the above code, we realize the alternation of two images of the picture. After the page is rendered, the image will switch every two seconds, showing different image effects. This can add some dynamics and vividness to the page and improve user experience.

To sum up, the Vue framework can easily realize the alternation of two images in the picture. By defining two image paths in the Vue instance, and using timers and switching functions to achieve alternate display of images. This approach is simple, easy to understand, and suitable for all types of web pages and applications.

The above is the detailed content of How to realize the alternation of two images of a picture through Vue?. For more information, please follow other related articles on the PHP Chinese website!