vue不同序号的元素添加不同的样式

一、总结

一句话总结：

在vue中设计一个样式的数据数组来遍历即可

 <script>

   new Vue({

       el:'#review_exam_part',

       data:{

           exam_part_style:[

               'small-box exam_part_color_1',

               'small-box exam_part_color_2',

               'small-box exam_part_color_3',

               'small-box exam_part_color_4',

               'small-box exam_part_color_5',

               'small-box exam_part_color_6',

               'small-box exam_part_color_7',

               'small-box exam_part_color_8',

           ],

       },

       computed: {

       }

   });

 </script>

二、vue——如何给v-for循环出来的元素设置不同的样式

转自或参考：vue——如何给v-for循环出来的元素设置不同的样式
https://blog.csdn.net/weixin_44613294/article/details/86615737

 

例如给循环出来的四个盒子设置不同的背景色
第一步：给要循环的盒子动态绑定class名 并且传入一个数组

       <div v-for="(i,a) in serve" class="sever_box2">

            <div :class="sstt[a]">

              <img :src="i.imgs" alt=""/>

              <router-link :to="i.url">

                <span>{{i.title}}</span>

              </router-link>

              <p>{{i.english}}</p>

            </div>

          </div>

第二步：在data中定义这个数组

data() {

      return {

        sstt: [

          "ss1",

          "ss2",

          "ss3",

          "ss4",

        ]

      }

第三步：在style中分别设置颜色

.ss1{

    background: #71b262;

  }

  .ss2{

    background: #6288b2;

  }

  .ss3 {

    background: #ecac60;

  }

  .ss4{

    background: #f87171;

  }

完成啦

三、vue个不同序号的元素添加不同的样式 实例

 @extends('home.layout.master')

 @section('title','复习测试')

 @section('top_resource')

     @include('home.app.layer')

     @include('home.app.vue')

 @endsection

 @section('content')

     <!-- Main content -->

     <section class="content">

         <div id="review_exam_part">

             <div class="row">

                 <div v-for="(i,a) in exam_part_style" class="col-lg-3 col-xs-6">

                     <!-- small box -->

                     <div :class="exam_part_style[a]">

                         <div class="inner">

                             <h3>150</h3>

                             <p>New Orders</p>

                         </div>

                         <div class="icon">

                             <i class="ion ion-ios-paper"></i>

                         </div>

                         <a href="#" class="small-box-footer">More info <i class="fa fa-arrow-circle-right"></i></a>

                     </div>

                 </div>

                 <!-- ./col -->

             </div>

         </div>

     </section>

     <!-- /.content -->

     {{-- 控制 复习测试的 的vue--}}

     <script>

         new Vue({

             el:'#review_exam_part',

             data:{

                 exam_part_style:[

                     'small-box exam_part_color_1',

                     'small-box exam_part_color_2',

                     'small-box exam_part_color_3',

                     'small-box exam_part_color_4',

                     'small-box exam_part_color_5',

                     'small-box exam_part_color_6',

                     'small-box exam_part_color_7',

                     'small-box exam_part_color_8',

                 ],

             },

             computed: {

             }

         });

     </script>

 @endsection