vue2有频率的图片文字变化_文字图片的频率-优快云博客

本文链接：https://blog.youkuaiyun.com/YingUser/article/details/124563455

本文介绍如何在Vue2应用中实现图片和文字有频率的变化。首先，在data中定义包含图片和文字的数组及当前索引；接着，将数组数据绑定到视图上；然后，在组件创建完成后设置定时器，定期更新当前索引，从而实现内容的动态切换；最后，展示了实际运行的效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

每一次变化都是不同的图片和文字

1、首先在data中定义数组和当前索引

currentIndex: 0,
      imageList: [

                     //这是本地图片

        {
          img: require("../assets/imgs/INFJ导师.png"),
          name: "INFJ",
          duty: "导师",
          doing: "擅长引导指引，遵循道德",
        },
        {
          img: require("../assets/imgs/ISTP手艺人.png"),
          name: "ISTP",
          duty: "手艺人",
          doing: "最擅长机械和实操相关技能",
        },
        {
          img: require("../assets/imgs/ISTJ侦探.png"),
          name: "ISTJ",
          duty: "侦探",
          doing: "最擅长检查管理",
        },
        {
          img: require("../assets/imgs/ENTP智多星.png"),
          name: "ENTP",
          duty: "智多星",
          doing: "最擅长创新和辩论",
        },
      ],

2、然后绑定数据在结构上

 <div class="title">你的性格类型是？</div>
          <div class="done-report-section__type">
            <img :src="imageList[currentIndex].img" alt="" class="cover" />
            <div class="type-english">{{ imageList[currentIndex].name }}</div>
            <div class="type-desc">
              <div>{{ imageList[currentIndex].duty }}</div>
              <div class="tips">{{ imageList[currentIndex].doing }}</div>
            </div>
          </div>
        </div>

3、然后在created中设置一个定时器

  created() {
    setInterval(() => {
      if (this.currentIndex >= this.imageList.length - 1) {
        this.currentIndex = 0;
      }

      this.currentIndex++;
    }, 1000);
  },

4、效果展示