案例：轮播图

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