如何用Vue.js获取api数据
下面是一个轮播图,效果如上,需要用到swiper插件
需要用到的插件有:
<!-- 引入bootstrap的CSS样式 -->
<link href="../css/bootstrap.min.css" rel="stylesheet">
<!-- 引入swiper的CSS样式 -->
<link rel="stylesheet" href="../css/swiper.min.css">
<!-- 引入bootstrap的js样式 -->
<script src="../js/jquery-1.10.1.min.js" type="text/javascript"></script>
<script src="../js/bootstrap.min.js" type="text/javascript"></script>
<script src="../js/vue.js" type="text/javascript"></script>
<script src="https://cdn.bootcss.com/vue-resource/1.3.3/vue-resource.js"></script>
<script src="../js/swiper.min.js"></script>
HTML:
<div class="rollingDiv">
<div class="container">
<div class="swiper-container">
<div class="swiper-wrapper" id="swiper-wrapper">
<!--轮播项目-->
<div class="swiper-slide" v-for="rolling inrollings">
<img :src="rolling.f_siUrl" class="img-responsive"> //注:f_siUrl是图片的路径
</div>
</div>
<!-- 轮播指标 -->
<div class="swiper-pagination"></div>
</div>
</div>
</div>
Vue.js代码
//轮播图
var vm = new Vue({
el: "#swiper-wrapper",
data: {
rollings: {}
},
mounted: function () {
this.$nextTick(function () {
this.$http.jsonp('http://thanbach.com/YXShoppingMallApp/exclusiveShop_getExclusiveShopSlide.jhtml?f_sId=2968d399-4402-4baf-b407-2b329f2a2c02').then(function (res) {
// alert(res.data.rows.length);
vm.rollings = res.data.rows;
Vue.nextTick(function () {
var swiper = new Swiper('.swiper-container', {
pagination: '.swiper-pagination',
autoplay: 3000, //间隔3秒执行一次
autoplayDisableOnInteraction: false, //鼠标悬停不停止滚动
loop: true //循环滚动
});
});
})
})
}
});