案例:轮播图

1、使用的是bootstrap中的响应式轮播图,其中要v-for循环轮播图的图片,需要给第一个添加class类名为“active”,循环中不会出现,那么我需要用到v-bind绑定class来判断,这个class中是否存在“active”,有则不加,没有就加上。

<div class="carousel-inner">
   <template v-for="(banner,index) in banner_program_info" >
        <div class="item" :class="[index == 0 ? 'active' : '']">
            <template v-for="pic in banner.ProgramPosterArray">
                <img :src="pic.ImageUrl" alt="First slide">
            </template>
        </div>
    </template>
</div>

注:item是必要类名,每个循环都有,绑定的:class=”[ index == 0 ? ‘active’ : ’ ’ ]”,循环的时候添加上index索引值,在class类里判断当索引值为0的时候添加;

2、在bootstrap中轮播图是有一个对应的指标,来监视着图片的多少,对应的也要有索引值来控制下面的按钮,思路一样;

<ol class="carousel-indicators">
    <template v-for="(banner,index) in banner_program_info">
        <li data-target="#myCarousel" :data-slide-to="index" :class="[ index == 0 ? 'active' : '']"></li>
    </template>
</ol>

注:其中data-slide-to这种自定义属性,需要用v-bind绑定,不然在点击轮播图的时候会出现报错。

3、最后在ajax请求成功的回调中加上对轮播图的设置;

success: function(data) {
   console.log(data);
   _this.banner_program_info = data;
   $('#myCarousel').carousel({
       interval: 2000, //循环时间
       pause: 'hover', //hover之后暂停
       wrap: true  //是否循环
   })
}

首次写博客,这个项目是一个视频门户的网站,我是一个初入vue的小白,记录点自己遇到的问题,边学边用,后续在遇到什么问题,继续更新博客

Logo

前往低代码交流专区

更多推荐