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

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);
            });
        }

    }
});

 

posted @ 2017-05-09 21:40  HongMaJu  阅读(1345)  评论(0)  编辑  收藏  举报