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. 文件流 io.StringIo()

    import io f = io.StringIO() f.write("") f.getvalue() f.close 二进制 f = io.Bytesio()

  2. mac下配置Apache虚拟域名方案，以及遇到的坑(转)

      1. 配置Apache虚拟域名 1.执行    sudo vi /etc/apache2/httpd.conf 开始配置httpd.conf 的文件; //配置listen 80端口(默认配置), ...

  3. mac OS X下Java项目环境搭建+IntelliJ IDEA Jrebel插件安装与破解+Office 2016破解版安装

    一.mac OS X下Java项目环境搭建 因为某些原因新入手了台最新版的MacBook Pro,意味着今天要花一天时间安装各种软件以及项目环境搭建╮(╯▽╰)╭ 项目环境搭建步骤: 1.安装jdk ...

  4. spark加载模型与gRPC与JSF与JDQ冲突

    spark与JSF冲突解决方式 <dependency> <groupId>org.apache.spark</groupId> <artifactId> ...

  5. 8.6 正睿暑期集训营 Day3

    目录 2018.8.6 正睿暑期集训营 Day3 A 亵渎(DP) B 绕口令(KMP) C 最远点(LCT) 考试代码 A B C 2018.8.6 正睿暑期集训营 Day3 时间:5h(实际) 期 ...

  6. Redis简单延时队列

    Redis实现简单延队列, 利用zset有序的数据结构, score设置为延时的时间戳. 实现思路: 1.使用命令 [zrangebyscore keyName socreMin socreMax] ...

  7. tcp连接状态查看

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

  8. Voltage Translation for Analog to Digital Interface ADC

    Voltage Translation for Analog to Digital Interface 孕龙逻辑分析仪 ZeroPlus Logic Analyzer How to modify an ...

  9. 手机号是SIM卡的号呢,还是买手机时就带的

    可以用原来的号码!把原来的卡装在新手机里就可以了,你的号码没有改变! 手机的号是由sim卡来决定的! 但是卡上的号码显示的是卡的一些信息! 你不用去理会它! 全文:http://iask.sina.c ...

  10. IntelliJ_2017_安装Grep Console插件（console输出内容加颜色）

      官网下载:https://plugins.jetbrains.com/plugin/7125-grep-console   一.安装Grep Console插件     二.设置不同日志类型的不同 ...