vue2有频率的图片文字变化

最新推荐文章于 2022-08-01 10:34:18 发布

cv酱

最新推荐文章于 2022-08-01 10:34:18 发布

阅读量753

点赞数

文章标签： webview android java

本文链接：https://blog.csdn.net/YingUser/article/details/124563455

版权

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

摘要由CSDN通过智能技术生成

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

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、然后绑定数据在结构上