Comment réaliser l'alternance de deux images d'une image via Vue ?

Comment réaliser l'alternance de deux images dans une image grâce à Vue ?

Dans le développement Web, nous avons souvent besoin d'afficher plusieurs images sur la page, et nous espérons que les images pourront être affichées alternativement pour augmenter l'effet dynamique et l'attractivité de la page. Sous le framework Vue, nous pouvons utiliser un code simple pour réaliser l'alternance de deux images dans l'image.

Tout d'abord, nous créons une instance Vue et définissons deux chemins d'image dans les données de l'instance Vue.

<div id="app">
  <img :src="currentImage" 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);
  }
});

Dans le code ci-dessus, nous avons défini deux chemins d'image dans les données de l'instance Vue, à savoir image1 et image2. Dans la fonction hook de cycle de vie montée de l'instance Vue, nous appelons la méthode startImageRotation pour initialiser la commutation des images et déterminer l'affichage actuel dans le toggleImage image de la méthode, puis changez. Grâce à la fonction <code>setInterval et à la minuterie, réglez l'image pour qu'elle change toutes les deux secondes. image1和image2。在Vue实例的mounted生命周期钩子函数中，我们调用startImageRotation方法来初始化图片的切换，并在toggleImage方法中判断当前显示的图片，然后进行切换。通过setInterval函数和定时器，设置每两秒切换一次图片。

最后，在Vue实例的beforeDestroy

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!