利用属性指令 + 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. netcore linux ffmpeg 首帧图

    第一步 On CentOS/RHEL 6.*: $ sudo rpm -Uvh http://li.nux.ro/download/nux/dextop/el6/x86_64/nux-dextop-r ...

  2. Rabbit算法：轻量高效的加密利器

    Rabbit算法起源: Rabbit算法是由Martin Boesgaard和Mette Vesterager提出的一种流密码算法,其设计初衷是为了提供高性能和高度安全性的加密方案.Rabbit算法结 ...

  3. 关于debian11无法安装星火商店的解决方法

    #!/bin/bash if [ "$(id -u)" != "0" ] then echo "请确保你使用root权限启动此脚本" exi ...

  4. Java/Kotlin 实现控制台输出日志保存到文件

    原文:Java/Kotlin 实现控制台输出日志保存到文件 | Stars-One的杂货小窝 之前开发的几款软件,用户用着的过程中,偶尔会存在报错问题,想保留一份日志出来,之后可由用户发过来,进行问题 ...

  5. electron 下网页获取 micphone 权限

    网页获取麦克风或摄像头权限我们只需调用 navigator.mediaDevices.getUserMedia 方法就可唤起浏览器用户授权 const useMicphone = async () = ...

  6. [.NET项目实战] Elsa开源工作流组件应用（一）： Elsa工作流简介

    Elsa工作流简介 工作流是什么? 引用维基百科中对工作流的解释: 是对工作流程及其各操作步骤之间业务规则的抽象.概括.描述.工作流建模,即将工作流程中的工作如何前后组织在一起的逻辑和规则在计算机中以 ...

  7. ProtoBuf-gRPC实践

    目录介绍 01.gRPC学习背景 1.1 为什么要学RPC 1.2 RPC是什么 1.3 网络库收益分析 1.4 学习计划说明 1.5 学习问题思考 02.ProtoBuf的介绍 2.1 ProtoB ...

  8. 记录--纯CSS实现骚气红丝带

    这里给大家分享我在网上总结出来的一些知识,希望对大家有所帮助 在本文中,我们将探讨如何使用 CSS 以最少的代码创造出精美的 CSS 丝带形状,并最终实现下面这个效果: 下面我们使用html和css来 ...

  9. 主nginx和子nginx-------域名-端口-解答

    主nginx和子nginx-------域名-端口-解答 想象一下Nginx是一个接待员,每个端口就像接待员的一个电话线,而server_name就像是客户拨打的不同号码. 当你在Nginx配置文件里 ...

  10. 工作中常用且容易遗忘的 CSS 样式清单

    注:本文转载自公众号 Vue中文社区的一篇文章 1.文字超出部分显示省略号 单行文本的溢出显示省略号(一定要有宽度)  p{    width:200rpx;    overflow: hidden; ...