模拟从后台取下数据,然后数据绑定在swiper标签中。
- <template>
- <div class="homePage">
- <abc></abc>
- <div id="banner">
- <div class="swiper-container">
- <div class="swiper-wrapper">
- <div class="swiper-slide" v-for="items in swiper" ><a href=""><img :src="items.activity.img"></a></div>
- </div>
- <div class="swiper-pagination"></div>
- </div>
- </div>
- </div>
- </template>
- <script>
- import Swiper from "../../static/js/swiper-3.4.0.min.js";
- import header from 'components/header.vue';
- export default {
- components : {
- abc : header
- },
- data(){
- return {
- swiper:""
- }
- },
- mounted(){
- this.$http.get("http://www.vrserver.applinzi.com/aixianfeng/apihome.php").then(function(res){
- this.swiper=res.data.data.slide;
- var mySwiper = new Swiper('.swiper-container', {
- autoplay: 2000,//可选选项,自动滑动
- //分页器
- pagination : '.swiper-pagination',
- paginationClickable :true,
- observer: true
- })
- })
- }
- }
- </script>
- <style type="text/css">
- @import "../../static/css/home.css";
- @import "../../static/css/swiper-3.4.0.min.css";
- </style>