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. List实体去重

    public static ArrayList<Room> removeDuplicate(List<Room> room) { Set<Room> set = n ...

  2. ubuntu18.04 lts重装VMware Tools实现主机文件共享等功能

    ubuntu18.04 lts重装VMware Tools实现主机文件共享等功能 在VMWare 14.x上安装ubunuu18.04 lts后发现,可以实现全屏显示,但是没有与主机共享文件的功能,然 ...

  3. hdu 2036 求多边形面积 （凸、凹多边形）

    <题目链接> Problem Description “ 改革春风吹满地,不会AC没关系;实在不行回老家,还有一亩三分地.谢谢!(乐队奏乐)” 话说部分学生心态极好,每天就知道游戏,这次考 ...

  4. macbook安装并破解Clion2018(Pycharm也一样)

    一.下载 Clion 并安装 二.修改hosts文件,使用 vim /private/etc/hosts 命令将 0.0.0.0 account.jetbrains.com 粘贴进去(提示: i键是插 ...

  5. golang编译源代码和交叉编译方法

    目录 golang编译源代码和交叉编译方法 编译源代码 编译go1.4 编译go1.12 交叉编译 golang编译源代码和交叉编译方法 编译源代码 golang编译其实很简单,下载一份最新的源代码后 ...

  6. struts1 标签引入

    1 tld文件导入 目录结构如下 2 jsp 文件头部标签引入 <%@ page pageEncoding="gbk" contentType="text/html ...

  7. AGC027 A - Candy Distribution Again

    目录 题目链接 题解 代码 题目链接 AGC027 A - Candy Distribution Again 题解 贪心即可 代码 #include<cstdio> #include< ...

  8. BZOJ 3930: [CQOI2015]选数 莫比乌斯反演

    https://www.lydsy.com/JudgeOnline/problem.php?id=3930 https://blog.csdn.net/ws_yzy/article/details/5 ...

  9. 关于WEB前端开发的工具

    俗话说:"工谷善其事,先必利其器."一个用得顺手的工具,确实能为我们的开发带来方 便,更重要的是会让我们更加享受工具开发过程中所带来的乐趣. 1.编码工具: 记事本之类的编辑器都可 ...

  10. MyEclipse设置文件的编码格式

    在MyEclipse中复制properties文件的时候,发现一个问题,在EditPlus中打开文件中文可以正常显示,并且是UTF-8的编码格式. 但是将这个文件复制到MyEclipse中再打开时,中 ...