刚用Vue的时候。没有加updated周期方法:数据获取过来。页面v-for遍历后。swiper已经执行过了。页面会出现一张图不动的状态。如果初始值放空的话也不行

<div id="ban" class="swiper-container banner">
    <div class="swiper-wrapper">

        <div class="swiper-slide" v-for="b in banner" >
            <div class="banner"><a :href="b.url"><img :src="b.pic" /></a></div>
        </div>

    </div>
    <!-- Add Pagination -->
    <div class="swiper-pagination"></div>
</div>

js代码

<script>
    var pageIndex=new Vue({
        el:"#ban",
        data:{
            banner:[],
            isTrue:false,
        },
        mounted:function(){
            console.log("我被挂载了、Swiper在这个AJAX调用完成不一定能完成出现轮播");
            var vue=this;
            $.ajax({
                url:"/index",
                dataType:'JSON',
                Type:'GET',
                data:{},
                success:function(res,x,d){
                    res.result.banner.forEach(function (item,index,data) {
                        res.result.banner[index].pic="/static/1.jpg";
                    });
                    vue.banner=res.result.banner;

                }
            });
        },
        updated:function(){
            if(this.isTrue==false){
                var swiper = new Swiper('.swiper-container.banner', {
                    pagination: '.swiper-pagination',
                    nextButton: '.swiper-button-next',
                    prevButton: '.swiper-button-prev',
                    paginationClickable: true,
                    centeredSlides: true,
                    autoplay: 2500,
                    autoplayDisableOnInteraction: false,
                    slidesPerView: 1,
                    loop: true
                });
                this.isTrue=true;
            }
            console.log(this.isTrue);

        },
        computed:{
            newA:function(){
                console.log("默认不触发、用到这里面的方法时(对外来说是属性、惰性加载)触发");
                var push=[];
                var ban=this.banner;
                ban.forEach(function (item,index,data) {
                    item.pic="/static/2.jpg";
                    push.push(item);
                });
                return push;
            },

        }
    });
</script>
Last modification:January 31, 2020
如果觉得我的文章对你有用,请随意赞赏