利用属性指令 + setInterval(是一个实现定时调用的函数)

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <script src="js/vue.js"></script>

</head>

<body>

<div id="app">

    <img v-bind:src="img[currentIndex]" alt="" @click="handleClick2">

    <div>

        <button @click="handleClick">点我切换</button>

    </div>

</div>

</body>

<script>

    var vm = new Vue({

        el: '#app',

        data: {

            img: [

                'img/1.png',

                'img/2.png',

                'img/3.png',

                'img/4.png',

                'img/5.png',

                'img/6.png',

                'img/7.png',

                'img/8.png',

            ],

            currentIndex: 0,

            timer: null,

        },

        methods: {

            handleClick() {

                this.timer = setInterval(() => {

                    this.currentIndex = (this.currentIndex + 1) % this.img.length;

                }, 1000);

            },

            handleClick2() {

                clearInterval(this.timer);

            },

        },

    })

</script>

</html>

补充延时任务和定时任务

setTimeout(function(){},3000)   # 3s后执行匿名函数  延时任务

var t=setInterval(function(){},3000)  # 每隔3s执行匿名函数  定时任务

clearInterval(t)   # 停止定时任务

t=null

Vue——自动切换图片的更多相关文章

  1. Android中仿淘宝首页顶部滚动自定义HorizontalScrollView定时水平自动切换图片

    Android中仿淘宝首页顶部滚动自定义HorizontalScrollView定时水平自动切换图片 自定义ADPager 自定义水平滚动的ScrollView效仿ViewPager 当遇到要在Vie ...

  2. JQury自动切换图片

    [标签]Jquery图片自动切换<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "ht ...

  3. 《ASP.NET1200例》高亮显示ListView中的数据行并自动切换图片

    aspx <script type="text/javascript"> var oldColor; function SetNewColor(Source) { ol ...

  4. vue动态切换图片

    1.踩的一个坑是:直接获取对象,使用style改变其背景图地址或者对img标签改变src值 因为经过vue经过打包编译后,图片地址已经被处理了,这时更新地址是无效的,会找不到图片. 所以可以用多个标签 ...

  5. js自动切换图片

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  6. 原生js+css3实现图片自动切换，图片轮播

    运用CSS3transition及opacity属性 制作图片轮播动画 自己这两天根据用js来控制触发CSS3中transition属性,从而写出来的以CSS3动画为基础,js控制过程的图片轮播 运用 ...

  7. Jquery的动态切换图片

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  8. 使用定时器通过改变图片的src来切换图片

    点击以后开始自动切换图片 $("#page3_cover_1_back").click(function(){ var i=3; var haha=setInterval(func ...

  9. 广告banner：手动滑动切换，自动切换，点击跳转，异步加载网络图片

    效果图: 该banner功能有自动切换图片,点击图片可以自定义事件,手动滑动切换,异步加载图片 代码说话: 布局文件: <!-- 广告位 --> <FrameLayout andro ...

  10. 获取bing.com的图片并在gnome3中设置自动切换

    发现 bing.com 上的图片很好看,因此打算每天把 bing.com 的图片下载下来,用作桌面. 需要做的是两个部分,爬取图片到目录和设置目录图片为桌面背景并可以自动切换. 第一部分,下载图片,使 ...

随机推荐

  1. vite环境配置mockjs

    mockjs使用文档v2.9.6 安装插件 npm i mockjs -S npm i vite-plugin-mock@2.9.6 配置vite.config.ts文件 export default ...

  2. moviepy 官方网址

    https://zulko.github.io/moviepy/ Gitee 说我有违规信息 醉了 { title: "moviepy", url: "https://z ...

  3. tapable - webpack 的 hooks - getAc - 异步流程控制

    tapable - webpack 的 hooks,类似自己的 getAc 官方地址 https://www.npmjs.com/package/tapable 随便找了篇文章:聊聊 Webpack ...

  4. 基于python的指定时段执行实例解析

    一 概念: python中库很多,这里熟悉下time和interval的用法 二 实例解析 切记这里的interval,输出的是目前的时间是一个数组. import time from interva ...

  5. AOSP源码编译—交换空间扩容

    编译AOSP源码的时候会出现提示如下: 意思是需要16G左右的内存(实际上编译会超过16G),而我们之前安装Ubuntu的时候只分配了8G,编 译一定会失败!此时需要添加虚拟内存(swap交换空间) ...

  6. .Net Core 你必须知道的source-generators

    源生成器是 C# 9 中引入的一项功能,允许在编译过程中动态生成代码. 它们直接与 C# 编译器集成(Roslyn)并在编译时运行,分析源代码并根据分析结果生成附加代码. 源生成器提供了一种简化的自动 ...

  7. 活动报名｜3DCAT实时渲染云行业生态合作系列沙龙之“云XR如何赋能虚拟仿真实验教学”线上活动邀您参会

    当前,虚拟现实发展方兴未艾,"XR+教育"融合发展前景广阔. 3DCAT实时渲染云积极联动教育行业渠道商等生态合作伙伴,合力打造"虚拟现实实验室"." ...

  8. 利用kali自带的msfvenom工具生成远程控制软件

    一.首先还是得打开postgresql service postgresql start 然后让我们看看它有哪些功能 部分参数 -p 选择一个载荷,或者说一个模块吧. -i 载荷列表 -f 生成的文件 ...

  9. QT 智能指针 QPointer QScopedPointer QSharedPointer QWeakPointer QSharedDataPointer 隐式共享 显示共享

    QPointer QPointer 使一种受保护的指针,当其引用的对象被销毁时,它会被自动清除(但是,销毁引用对象还是必须手动delete).QPointer所指向的对象必须是QObject或其派生类 ...

  10. Python 变换单词顺序组成新的一句话

    需求描述: 现在给出几个单词需要不断变换单词的顺序组成新的一句话 import itertools import pandas as pd # 定义项目列表 items = ['dog', 'appl ...