vue+bootstrap响应是轮播绑数据（视频门户网站）

案例：轮播图

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的小白，记录点自己遇到的问题，边学边用，后续在遇到什么问题，继续更新博客