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. P2648 赚钱

    P2648 赚钱对于不知道起点在哪里的最短路,先建立一个超级源点,然后从超级源点跑最长路,并判正环即可. #include<iostream> #include<cstdio> ...

  2. 【*】CAS 是什么,Java8是如何优化 CAS 的

    文章结构 前言 想要读懂 Java 中的并发包,就是要先读懂 CAS 机制,因为 CAS 是并发包的底层实现原理.本文主要讨论  CAS 是如何保证操作的原子性的  Java8 对 CAS 进行了哪些 ...

  3. 处理全站请求编码，无论是GET还是POST，默认是UTF-8

    1.java类: import java.io.IOException;import javax.servlet.Filter;import javax.servlet.FilterChain;imp ...

  4. LVS 之ARP

    原理 工作过程 主机A的IP地址为:192.168.1.1  MAC地址为:0A-11-22-33-44-01: 主机B的IP地址为:192.168.1.2  MAC地址为:0A-11-22-33-4 ...

  5. Java多线程：CAS与java.util.concurrent.atomic

    锁的几种概念 悲观锁 总是假设最坏的情况,每次获取数据都认为别人会修改,所以拿数据时会上锁,一直到释放锁不允许其他线程修改数据.Java中如synchronized和reentrantLock就是这种 ...

  6. Install LAMP Stack On Ubuntu 16.04

    原文:http://www.unixmen.com/how-to-install-lamp-stack-on-ubuntu-16-04/ LAMP is a combination of operat ...

  7. AngularJS中使用$http对MongoLab数据表进行增删改查

    本篇体验使用AngularJS中的$http对MongoLab数据表进行增删改查. 主页面: <button ng-click="loadCourse()">Load ...

  8. 5款替代微软Visio的开源免费软件

    提到流程图和图表设计,自然会想到微软出品的Office Visio,它是一款强大的流程图设计工具.Visio并不在Office标准套装中,需要额外付费购买,这可能会带来某些不便.一方面,并不是所有人都 ...

  9. Go语言之高级篇beego框架之controller调用model

    一.controller调用model 开发规范,就该把对数据库的操作写在model文件夹中. 示例: views/main.go package main import ( _ "web/ ...

  10. [leetcode]Decode Ways @ Python

    原题地址:https://oj.leetcode.com/problems/decode-ways/ 题意: A message containing letters from A-Z is bein ...