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. union的含义

    用于合并两个或者多个select语句的结果集 请注意,UNION 内部的 SELECT 语句必须拥有相同数量的列.列也必须拥有相似的数据类型.同时,每条 SELECT 语句中的列的顺序必须相同. ex ...

  2. 对于pycharm和vscode下，从外部复制文本内容为python字符串内容是会自动加\u202a解决办法

    先来看下这个python3源代码,表面上看没有语法毛病,如果源代码字符串内容是手动复制过来的文本内容,在pycharm和vscode下始终提示: pywintypes.error: (2, 'Shel ...

  3. pandas学习(创建多层索引、数据重塑与轴向旋转)

    pandas学习(创建多层索引.数据重塑与轴向旋转) 目录 创建多层索引 数据重塑与轴向旋转 创建多层索引 隐式构造 Series 最常见的方法是给DataFrame构造函数的index参数传递两个或 ...

  4. 算法初级面试题05——哈希函数/表、生成多个哈希函数、哈希扩容、利用哈希分流找出大文件的重复内容、设计RandomPool结构、布隆过滤器、一致性哈希、并查集、岛问题

    今天主要讨论:哈希函数.哈希表.布隆过滤器.一致性哈希.并查集的介绍和应用. 题目一 认识哈希函数和哈希表 1.输入无限大 2.输出有限的S集合 3.输入什么就输出什么 4.会发生哈希碰撞 5.会均匀 ...

  5. c#操作数据库的增删改查语句及DataGridView简单使用

    下面是要用户名和密码连接数据库的操作: 一.定义连接字符串,用来链接SQL Server string str_con = "server=.(服务器名称一般为 . );database=W ...

  6. HDU.3032.Nim or not Nim？(博弈论 Lasker's Nim)

    题目链接 \(Description\) 有多堆石子, 每次可以将任意一堆拿走任意个或者将这一堆分成非空的两堆, 拿走最后一颗石子的人胜利.问谁会获得胜利. \(Solution\) Lasker's ...

  7. C++ map<key , value> key值为指针

    STL中map的key能否用char *呢?当然可以! 在程序中需要用到一个map,本来是这样写的, map<string, int> mapStr; 为了追求效率,把string改成了c ...

  8. [模板][P3377]左偏树

    Description: 一开始有N个小根堆,每个堆包含且仅包含一个数.接下来需要支持两种操作: 操作1: 1 x y 将第x个数和第y个数所在的小根堆合并(若第x或第y个数已经被删除或第x和第y个数 ...

  9. 晚期（运行期）优化---HotSpot虚拟机内的即时编译器

    最初java程序是通过解释器进行解释执行的,当虚拟机发现某个方法或代码块的运行特别频繁时,就会把这些代码认定为“热点代码”.为了提高热点代码的执行效率,在运行时,虚拟机将会把这些代码编译成与本地平台相 ...

  10. 构造函数,super()

    一.构造函数的作用 创建类的对象,只有对象才能调用一个类中的方法和属性 二.在有继承关系的类中,创建子类对象,初始化的顺序 先父类构造 —>后子类构造 为什么父类构造会被调用?因为有继承关系,子 ...