利用属性指令 + 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. mongo Payload document size is larger than maximum of 16777216. 如何处理

    MongoDB中的文档大小限制为16MB(即16777216字节).如果你遇到Payload document size is larger than maximum of 16777216的错误,意 ...

  2. .npmrc 项目的 默认安装配置

    .npmrc registry=http://192.168.77.105:8081/nexus/content/groups/npm-all/

  3. Linux 运维工程师面试真题-4-Linux 服务配置及管理

    Linux 运维工程师面试真题-4-Linux 服务配置及管理** 1.请写出 apache2.X 版本的两种工作模式,以及各自工作原理.如何查看 apache 当前所 支持的模块,并且查看是工作在哪 ...

  4. KingbaseES 函数与存储过程内容加密

    说明: 数据库系统使用过程中,有些业务功能在特殊的安全级别情况下,需要对数据库中的函数和存储过程进行加密存储,以保证数据库函数和过程的代码安全性.KingbaseES 数据库,提供了DBMS_DDL扩 ...

  5. KingbaseES V8R6运维案例之---普通表toast表故障修复

    案例说明: 数据库在日常的维护过程中,在执行表查询(select),如下图所示,出现"could not read block 0 in file "base/16385/1640 ...

  6. CentOS 7 上搭建nginx来部署静态网页

    目录 0. Nginx简介 1. 安装以及使用 1.1 安装和启动 1.2 配置服务器的访问地址 1.3 重启nginx,打开浏览器访问 0. Nginx简介 Nginx (engine x) 是一个 ...

  7. llama2+localGPT打造纯私有知识助手

    通过部署llama2系列,可以构建本地私有的知识小助手 用来输出一写周报.月报,甚至辅助数据分析都可以(想想都很轻松) 想要大模型支持特定的数据集,就需要进行专业的fine-turing 但是fine ...

  8. GraphQl in ASP.NET Core

    GraphQl in ASP.NET Core https://graphql.cn/ https://graphql-dotnet.github.io/docs/getting-started/ar ...

  9. USACO 4.2

    目录 洛谷 2740 草地排水 代码(网络最大流) 洛谷 2751 工序安排 分析 代码 洛谷 1894 完美的牛栏 代码(二分图最大匹配) 草地排水洛谷传送门,草地排水USACO传送门 工序安排洛谷 ...

  10. #最小生成树,Trie#CF888G Xor-MST

    题目 给定 \(n\) 个结点的无向完全图.每个点有一个点权为 \(a_i\) . 连接 \(i\) 号结点和 \(j\) 号结点的边的边权为 \(a_i\oplus a_j\) . 求这个图的 MS ...