利用属性指令 + 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. linux下命令行打开文件夹窗口

    方法一: 使用自带的命令:nautilus . 打开当前文件夹 nautilus . 打开指定路径文件夹 nautilus ddd/ccc/ 方法二:xdg-open xdg-open 命令相当于在 ...

  2. WPF线程模型

    1. 渲染系统概述 WPF 采用保留模式渲染系统 (Retained Mode Rendering System),该系统可分为 UI 线程和复合线程两个主要部分,两者协作完成 WPF 应用程序的渲染 ...

  3. 《TencentNCNN系列》 之bin文件（网络参数文件）格式分析

    PS:要转载请注明出处,本人版权所有. PS: 这个只是基于<我自己>的理解, 如果和你的原则及想法相冲突,请谅解,勿喷. 前置说明   本文作为本人csdn blog的主站的备份.(Bl ...

  4. 解决Idea找不到URL问题

    解决Idea找不到URL问题   我这几天遇到一个特别恶心的问题,查了很多资料,都是没用的后来自己静下心来,发现自己的import导包错了,我用的是jakarta,jakarta主要是利用Tomcat ...

  5. ARouter路由解析

    目录介绍 01.原生跳转实现 02.实现组件跳转方式 2.1 传统跳转方式 2.2 为何需要路由 03.ARouter配置与优势 04.跨进程组件通信 4.1 URLScheme 4.2 AIDL 4 ...

  6. 鸿蒙HarmonyOS实战-ArkUI组件（Row/Column）

    前言 HarmonyOS的布局组件是一组用于构建用户界面布局的组件,包括线性布局.相对布局.网格布局等.这些组件帮助开发者以简单和灵活的方式管理和组织应用程序中的视图,并支持多种不同的设备屏幕尺寸和方 ...

  7. 微信小程序获取手机号流程

    小程序中获取手机号前提 小程序需企业认证,才可以获取用户的手机号,个人开发者是不能获取的 哔哔下 官方文档给出需先登录才可获取手机号 传送门 思路为:login登录获取code-->code传给 ...

  8. SMASH：经典One-Shot神经网络搜索，仅需单卡 | ICLR 2018

    SMASH方法使用辅助网络生成次优权重来支持网络的快速测试,从结果来看,生成的权重与正常训练的权重在准确率上存在关联性,整体搜索速度很快,仅需要单卡进行搜索,提供了一个很好的新思路.   来源:晓飞的 ...

  9. Lab2:System Call

    trace 该系统调用程序,可以跟踪其他的系统调用命令,该系统调用的形参为一个整数掩码.其具体实参为1 << sys_call所得到的整数值,sys_call是一个系统调用指令在内核中定义 ...

  10. 鸿蒙HarmonyOS实战-ArkUI组件（Grid/GridItem）

    一.Grid/GridItem 1.概述 网格布局是一种新型的布局方式,它按照网格来划分页面,通过列和行来定义网格,使得页面的布局更加灵活.简洁.易于维护.网格布局能够将页面分成多个单元格,可以在这些 ...