利用属性指令 + 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. 基于python的opus编解码实力解析

    一 opus   pyogg是一个非常不错的库,用这个做音频的编码和解码非常方便.   二 源码解析   import wave from pyogg import OpusEncoder from ...

  2. 手把手的使用Toolkit插件在诗情画意中完成AI诗朗诵

    本文分享自华为云社区<[云驻共创]手把手的使用Toolkit插件在诗情画意中完成AI诗朗诵>,作者: 红目香薰. 云原生时代,开发者们的编程方式.编程习惯都发生了天翻地覆的变化,大家逐渐地 ...

  3. 前后端分离Ajax入门

    前后端分离之Ajax入门 一.概念 Ajax(Asynchronous Javascript And XML),即是异步的JavaScript和XML,Ajax其实就是浏览器与服务器之间的一种异步通信 ...

  4. 【3D可视化】3D可视化在智慧园区的应用

    随着5G运用和新基建政策,构建智慧城市系统成为当下城市管理的热门需求,智慧园区建设的核心是3D可视化平台,利用它可以提高企业园区智能化.3D数字化管理服务水平. 一.智慧园区概念 "3D可视 ...

  5. C# 优雅的处理TCP数据（心跳，超时，粘包断包，SSL加密 ，数据处理等）

    Tcp是一个面向连接的流数据传输协议,用人话说就是传输是一个已经建立好连接的管道,数据都在管道里像流水一样流淌到对端.那么数据必然存在几个问题,比如数据如何持续的读取,数据包的边界等. Nagle's ...

  6. C# OpenCvSharp-HoughCircles（霍夫圆检测） 简单计数

    效果 项目 代码 using System; using System.Collections.Generic; using System.ComponentModel; using System.D ...

  7. parameter常数及常数函数的使用

    模型功能 常数在verilog设计中具备特殊的含义 一个可以由编译器进行处理的数 和C语言中常数一个不变的变量的作用不同 在verilog中,常数更多地作为预编译变量以提高设计的灵活性 在上一篇文章中 ...

  8. KingbaseESV8R6 heap table末端垃圾页回收机制

    前言 默认情况下,vacuum表不能释放磁盘空间,只是在dead tuple做个标记位,但heap table末端的垃圾页可以被truncate,从磁盘中释放空间.例如表的末尾的100个数据块里面全是 ...

  9. KingbaseES V8R3 集群运维系列 -- sync_flag参数配置

    ​ 案例说明: 在KingbaseES V8R3集群一主二备的架构中,配置了流复制为同步(sync)模式,但是集群启动后,流复制状态中显示备库是async模式(备库和主库数据已经同步),从备库的rec ...

  10. JS实现决策报表缓存最后一次查询条件

    问题描述 决策报表在打开时希望参数控件的值可以默认是上一次页面关闭前最后一次查询所选择的值. 解决方案 每次点击查询后将参数值保存到浏览器缓存中(适用于控件在参数栏内),或每次控件值发生改变后将参数值 ...