利用属性指令 + 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. 利用Nginx正向代理实现局域网电脑访问外网

    引言 在网络环境中,有时候我们需要让局域网内的电脑访问外网,但是由于网络策略或其他原因,直接访问外网是不可行的.这时候,可以借助 Nginx 来搭建一个正向代理服务器,实现局域网内电脑通过 Nginx ...

  2. cache 本地&分布式(-redis) & JSON对象转换

    本地缓存 最简单的cache, 做一个map就行 private final Map<String,List<User>> cache=new HashMap<>( ...

  3. arch安装deep-wine-wechat时，跳过md5检测的方法

    yay -S --mflags --skipinteg deepin-wine-wechat 这条命令是的我们跳过了md5检测! 微信的安装位置:C:\Program Files\Tencent\We ...

  4. Neural Dynamics on Complex Networks-KDD20

    一.摘要 学习复杂网络上的连续时间动态对于理解.预测和控制科学和工程中的复杂系统至关重要.然而,由于高维系统结构中的组合复杂性.它们难以捉摸的连续时间非线性动力学以及它们的结构-动力学依赖性,使得这项 ...

  5. 基于Apollo3-Blue-MCU的智能手表方案源码解析

    一 方案简介 1.简介 Apollo3 Blue Wireless SoC是一款超低功耗无线mcu芯片,它的运行功耗降至6μA/ MHz以下.该器件采用ARM Cortex M4F内核,运行频率高达9 ...

  6. Java加密技术（二）——对称加密算法DES&AES

    desdesedejavaaes     接下来我们介绍对称加密算法,最常用的莫过于DES数据加密算法. DES DES-Data Encryption Standard,即数据加密算法.是IBM公司 ...

  7. Three.js的基础使用

    1. 引言 Three.js是著名的JavaScript 3D图形库,用于浏览器中开发 3D 交互场景的 JS 引擎,可以快速的搭建三维场景 Three.js官网为:创建一个场景 – three.js ...

  8. 记录--经常被cue大文件上传，忍不住试一下

    这里给大家分享我在网上总结出来的一些知识,希望对大家有所帮助 大文件上传主要步骤: 获取文件对象,切分文件 根据文件切片,计算文件唯一hash值 上传文件切片,服务端保存起来 合并文件切片,前端发送合 ...

  9. ADAS-AEB系统详解

    ADAS-AEB系统详解 AEB即自动紧急制动(Automatic Emergency Braking),其通过雷达.摄像头共同监测前方车辆以及行人情况,若探测到潜在碰撞风险,系统将采取相应预警及制动 ...

  10. SDC可伸缩的高维约束基准和算法

    可伸缩的高维约束基准和算法 ​ 在过去二十年里,进化约束多目标优化受到了广泛的关注和研究,并且已经提出了一些基准测试约束多目标进化算法(CMOEAs).特别地,约束函数与目标函数值有紧密的联系,这使得 ...