vue,js问题总结

使用vue+ajax获取数据渲染轮播图后，轮播图组件失效

html

<div id="app">
	<div id="aui-slide">
	    <div class="aui-slide-wrap" >
	        <div class="aui-slide-node bg-dark" v-for="img in datainfo.imgs">
	            <img :src="img.imgs" />
	        </div>
	    </div>
	    <div class="aui-slide-page-wrap"><!--分页容器--></div>
	</div>
</div>


js

<script src="https://cdn.jsdelivr.net/npm/vue@2.6.11"></script>

<script>
	new Vue({
		el:'app',
		data:'banner',
		created: function(){
			var _this = this;
			//轮播图
			postHttp('banner',{},function(res){
			   
			    _this.bannerList = res.data
			},function(){
				//因为vue渲染数据的速度比轮播组件慢,所以可以使用计时器延迟1秒加载轮播组件

			    setTimeout(function(){
			        var slide = new auiSlide({
			            container:document.getElementById("aui-slide"),
			            "height":200,
			            "speed":500,
			            "autoPlay": 3000, //自动播放
			            "loop":true,
			            "pageShow":true,
			            "pageStyle":'dot',
			            'dotPosition':'center'
			        })
			    },1000)
			});
		}
	})
</script>

动态修改background-image

<div class="content-wapper" :style="{backgroundImage:'url(\''+seller.avatar+'\')'}">