刚用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>