首页 > 其他分享 >Vue——自动切换图片

Vue——自动切换图片

时间:2023-06-03 09:12:22浏览次数:41  
标签:Vue img setInterval timer 自动 切换 png currentIndex

利用属性指令 + 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>

标签:Vue,img,setInterval,timer,自动,切换,png,currentIndex
From: https://www.cnblogs.com/XxMa/p/17452711.html

相关文章

  • Vue——属性指令、style和class、条件渲染、列表渲染、事件处理、数据双向绑定、过滤
    vm对象<body><divid="app"><h1>{{name}}</h1><button@click="handleClick">点我</button></div></body><script>//1写在data或method中的属性或方法,从vm中直接可以点出来//2method的函数中,如......
  • vuepress快速安装笔记
    参考https://vuepress.vuejs.org/guide/getting-started.html#prerequisiteshttps://blog.llyth.cn/1065.html注意:应该是cd到新建项目文件夹的docs里,然后yarninstall。在项目文件夹里,执行yarndev启动运行项目,yarnbuild生产静态文件,结果与文件路径如下。waitRenderings......
  • ASP.NET Core MVC 从入门到精通之自动映射(一)
    随着技术的发展,ASP.NETCoreMVC也推出了好长时间,经过不断的版本更新迭代,已经越来越完善,本系列文章主要讲解ASP.NETCoreMVC开发B/S系统过程中所涉及到的相关内容,适用于初学者,在校毕业生,或其他想从事ASP.NETCoreMVC系统开发的人员。经过前几篇文章的讲解,初步了解ASP.NETCore......
  • vue解决跨域方法
    什么是跨域  跨域指浏览器不允许当前页面的所在的源去请求另一个源的数据。源指协议,端口,域名。只要这个3个中有一个不同就是跨域。这里列举一个经典的列子:#协议跨域http://a.baidu.com访问https://a.baidu.com;#端口跨域http://a.baidu.com:8080访问http://a.baidu.com:80;#域......
  • vue学习笔记一
    VUE自学目录VUE自学一、vue核心的相关学习一,搭建vue开发环境1.下载vue.js2.下载扩展工具二,helloworld案例三,helloworld项目扩展四,模板语法五,数据绑定六,el和data的两种写法发七,理解MVVM模型八,数据代理1.Object.defineProperty2.什么是数据代理3.vue中的数据代理九,事件处理1.事件......
  • vue、js onSelect事件 获取选中的值
    https://huaweicloud.csdn.net/639ff5afdacf622b8df90ecc.html?spm=1001.2101.3001.6661.1&utm_medium=distribute.pc_relevant_t0.none-task-blog-2~default~BlogCommendFromBaidu~activity-1-125977595-blog-51669331.235^v36^pc_relevant_default_base3&depth_1-ut......
  • 软件测试工程师如何从功能测试转成自动化测试?经验分享篇
    随着测试行业的发展,"会代码"越来越成为测试工程师的一个标签。打开各大招聘网站,测试工程师月薪一万以上基本都有一个必备技能,那就是自动化测试。那么自动化测试到底难不难呢?下面我将会将我的经历讲给大家听,希望听完后,大家会有自己的一个判断。我是谁大家好,我是软件测试汪。不知......
  • 总结vue3 的一些知识点:Vue.js 安装
    Vue.js安装1、独立版本我们可以在Vue.js的官网上直接下载vue.min.js并用 <script> 标签引入。下载Vue.js2、使用CDN方法以下推荐国外比较稳定的两个CDN,国内还没发现哪一家比较好,目前还是建议下载到本地。StaticfileCDN(国内) : https://cdn.staticfile.org/v......
  • 总结vue3 的一些知识点:Vue.js 安装
    Vue.js安装1、独立版本我们可以在Vue.js的官网上直接下载vue.min.js并用 <script> 标签引入。下载Vue.js2、使用CDN方法以下推荐国外比较稳定的两个CDN,国内还没发现哪一家比较好,目前还是建议下载到本地。StaticfileCDN(国内) : https://cdn.staticfile.org/v......
  • APP自动化--webview上下文翻动
    前提工作都做好,包括1、开启webview,打开app对应的h5页面,在chrome://inspect/#devices地址中,检查是否显示对应的webview,如没有,则当前未开启调试模式开启方式:在WebView类中调用静态方法setWebContentsDebuggingEnabled,这种需要App开发人员操作。if(Build.VERSION.SDK_INT>=Buil......