为了账号安全,请及时绑定邮箱和手机立即绑定

bootstrap的轮播,vue绑定数据?

/ 猿问

bootstrap的轮播,vue绑定数据?

Zoe_z 2018-05-28 21:41:30

一开始用bootstrap来实现静态的轮播,现在用vue来绑定之后,轮播就动不了?

https://img2.mukewang.com/5b0c06d60001714e08870362.jpg

https://img2.mukewang.com/5b0c06d60001c8f005960575.jpg

https://img1.mukewang.com/5b0c06f8000114f305850036.jpg

<div class="section" id="sj">

    <div v-for="r in datas" class="section content" :id="r.autoid">

        <div id="carousel-example-generic section " class="carousel slide" data-ride="carousel">

             <!-- Indicators -->

             <ol class="carousel-indicators">

                 <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>

                 <li data-target="#carousel-example-generic" data-slide-to="1"></li>

                 <li data-target="#carousel-example-generic" data-slide-to="2"></li>

                 <li data-target="#carousel-example-generic" data-slide-to="3"></li>

             </ol>

             <!-- Wrapper for slides -->

             <div class="carousel-inner section" role="listbox" >

                 <div class="item active"><img :src="'images/sj/'+r.photo1+'.jpg'" alt="..."></div>

                 <div class="item "><img :src="'images/sj/'+r.photo2+'.jpg'" alt="..."></div>

                 <div class="item "><img :src="'images/sj/'+r.photo3+'.jpg'" alt="..."></div>

                 <div class="item "><img :src="'images/sj/'+r.photo4+'.jpg'" alt="..."></div>

               </div>

        </div>

    </div>

</div>

js:

$(function(){

     var vmm = new Vue({

         el:"#sj",

         data:{

         datas:[]

         },

         mounted:function(){

         this.showData();

         this.showCar();

         },

         methods:{

         showData:function(){

         $.ajax({

             type:'get',

             url:'../wxk.json',

             dataType:'json',

             success:function(data){

             for(var i=0;i<data.sjList.length;i++){

                 if(sjid == data.sjList[i].autoid){

                      vmm.datas.push(data.sjList[i]);

                 }

             }

             }

           });

         },

         showCar:function(){

         //轮播

         $(".carousel").swipe({

         swipeLeft: function() { $(this).carousel('next'); },

         swipeRight: function() { $(this).carousel('prev'); },

         });

         }

     }

});


查看完整描述

1 回答

?
Keyro

可以使用这个组件库https://github.com/bootstrap-vue/bootstrap-vue,这个库对于常用的bootstrap组件做了封装,不用自己去写

查看完整回答
反对 回复 2018-05-29

添加回答

回复

举报

0/150
提交
取消
意见反馈 帮助中心 APP下载
官方微信