1、效果

2、index.html

<!DOCTYPE html>

<html lang="en">

<link>

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0">

<link rel="stylesheet" href="CSS/reset.css">

<link rel="stylesheet" href="CSS/weui.min.css">

<link rel="stylesheet" href="CSS/base.css">

<link rel="stylesheet" href="Css/index.css">

<title>Document</title>

</head>

<body>

<!--top轮播图片-->

<div class="top">

    <img id="moveImgs" :src="now" alt="">

    <!-- <input type="text" value="Images/1.jpg"   v-model="now"> -->

</div>

<script src="Javascript/plugin/vue.min.js"></script>

<script src="Javascript/plugin/axios.min.js"></script>

<script src="Javascript/index.js"></script>

</body>

</html>

3、index.js

new Vue({

    el:".top",

    data:{

        pic:[],

        now:"Images/1.jpg"

        // imgs[]

    },

    mounted:function(){

        this.$nextTick(function(){

            this.getPic();

        });

    },

    computed:{},

    methods:{

        getPic:function(){

        // 也可以通过 params 对象传递参数

            axios.get('Data/goPics.json', {

                params: {

                //ID: 12345

                },

                 responseType: 'json', // default

            })

            .then(function (response) {

                this.pic=response;

            var i=0;

                //alert(this.pic.data[0].url)

                  var _this=this;

                 setInterval(function(){

                    if(i>=_this.pic.data.length){

                    i=0;

                       }

                        _this.now=_this.pic.data[i].url;

                        var element = document.getElementById('moveImgs');//使用最原始的方法，得到元素，再修改

                     element.src =  _this.now;

                       //Vue.set(_this.now, i,_this.pic.data[i].url);

                       console.log(_this.now);

                        i++;

             },2000);

            })

            .catch(function (error) {

                console.log(error);

            });

        }

    }

});

vue手写的轮播图片，解决已经修改data中的值，页面标签已绑定，但页面没效果的更多相关文章

  1. jquery手写焦点轮播图-------解决最后一张无缝跳转第一张的问题

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  2. 手写无缝轮播banner

    <div class="banner"> <ul class="clearfloat bannerul xin" id="xin&q ...

  3. 后盾网lavarel视频项目---Vue项目使用vue-awesome-swiper轮播插件

    后盾网lavarel视频项目---Vue项目使用vue-awesome-swiper轮播插件 一.总结 一句话总结: vue中的插件的使用和js插件的使用一样的简单,只是vue插件的引入过程有些不同 ...

  4. 轮播图片 高效图片轮播，两个imageView实现

    该轮播框架的优势: 文件少,代码简洁 不依赖任何其他第三方库,耦合度低 同时支持本地图片及网络图片 可修改分页控件位置,显示或隐藏 自定义分页控件的图片,就是这么个性 自带图片缓存,一次加载,永久使用 ...

  5. 用jQuery写的轮播图

    效果图: GitHub地址:https://github.com/123456abcdefg/Javascript 大家可以下载源码查看. 与前一篇写的轮播图实现的效果一致,这个是用jQuery写的, ...

  6. 自己用原生JS写的轮播图，支持移动端触屏滑动，面向对象思路。分页器圆点支持click和mouseover。

    自己用原生javascript写的轮播图,面向对象思路,支持移动端手指触屏滑动.分页器圆点可以选择click点击或mouseover鼠标移入时触发.图片滚动用的setInterval,感觉setInt ...

  7. [js开源组件开发]js轮播图片支持手机滑动切换

    js轮播图片支持手机滑动切换 carousel-image 轮播图片,支持触摸滑动. 例子见DEMO http://www.lovewebgames.com/jsmodule/carousel-ima ...

  8. 微信小程序轮播图组件 swiper，swiper-item及轮播图片自适应

    官网地址:https://developers.weixin.qq.com/miniprogram/dev/component/swiper.html index.wxml文件 indicator-d ...

  9. APP动态加载轮播图片

    如果APP里面的轮播图片是动态加载的话,那么你会发现他不会轮播(前提是mui框架),这里都是用的mui框架,动态加载的图片因为mui的js查不到html上面没有图片,所以就不会轮播,需要手动重置下轮播 ...

随机推荐

  1. python魔法方法-属性访问控制

    属性访问控制 所谓的属性访问控制就是控制点号访问属性的行为,而且不仅是类的外部,连类的内部也受控制,代码见真章,边看代码边解释: __getattr__(self, item) 定义当访问不存在的属性 ...

  2. Android Firebase Android google-cloud-tools

    Firebase 让不懂服务端的开发者也可以快速写出实时性的Web端和移动端应用. firebase的功能包括推送通知,云存储,活动监视,远程部署 针对国内三方推送,只能在国内使用,到了国外就不支持了 ...

  3. Codeforces.100633J.Ceizenpok's formula(扩展Lucas)

    题目链接 ->扩展Lucas //求C_n^k%m #include <cstdio> typedef long long LL; LL FP(LL x,LL k,LL p) { L ...

  4. Loadrunner的参数化解析

    参数化的用法 例如 1.登录一个网站,我们可以有很多的不同的用户名和密码 2.创建客户时我们可以通过参数化使得客户编号,客户名称使用多种组合 等等.. 那么下面就为大家介绍参数化的用法 参数化有2种 ...

  5. Convert a VMDK (VMWare) file to VHDX (Hyper-V)

    https://www.meziantou.net/2016/09/09/convert-a-vmdk-vmware-file-to-vhdx-hyper-v Microsoft provides a ...

  6. 喵哈哈村的魔法考试 Round #13 (Div.2) 题解

    喵哈哈村的木星传说(一) 旋转90°,找找规律就知道(x,y)->(n-1-y,x) 然后输出就好了. #include<bits/stdc++.h> using namespace ...

  7. tcp连接状态查看

    linux常用查看tcp状态工具netstat和ss,这两个工具查看时都有1个Recv-Q和Send-Q 解释如下: 对应处于Listen状态的套接字: Recv-Q表示已建立连接队列中连接个数(等待 ...

  8. caffe出错：Unknown bottom blob 'data' (layer 'conv1', bottom index 0)

    原文https://blog.csdn.net/u011070171/article/details/75425740 caffe训练出现如下错误: Unknown bottom blob 'data ...

  9. 在 Visual Studio 2010 中配置SharpPcap

    最近需要在C#下写一个抓取ARP包的程序,网上找来找去,在C#下只能用SharpPcap来做了.SharpPcap是作者把winPcap用C#重新封装而来的,详细信息见如下的链接. SharpPcap ...

  10. Windows上的git、github部署及基本使用方法

    1.介绍 Git是一个开源的分布式版本控制系统,可以有效.高速地处理从很小到非常大的项目版本管理.Git 是 Linus Torvalds 为了帮助管理 Linux 内核开发而开发的一个开放源码的版本 ...