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

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

一、总结

一句话总结：

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

1 <script>
 2   new Vue({
 3       el:'#review_exam_part',
 4       data:{
 5           exam_part_style:[
 6               'small-box exam_part_color_1',
 7               'small-box exam_part_color_2',
 8               'small-box exam_part_color_3',
 9               'small-box exam_part_color_4',
10               'small-box exam_part_color_5',
11               'small-box exam_part_color_6',
12               'small-box exam_part_color_7',
13               'small-box exam_part_color_8',
14           ],
15       },
16       computed: {
17 
18       }
19   });
20 </script>

 

 

 

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

 

例如给循环出来的四个盒子设置不同的背景色

第一步：给要循环的盒子动态绑定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个不同序号的元素添加不同的样式 实例

 

 

1 @extends('home.layout.master')
 2 @section('title','复习测试')
 3 @section('top_resource')
 4     @include('home.app.layer')
 5     @include('home.app.vue')
 6 @endsection
 7 @section('content')
 8 
 9     <!-- Main content -->
10     <section class="content">
11 
12         <div id="review_exam_part">
13             <div class="row">
14                 <div v-for="(i,a) in exam_part_style" class="col-lg-3 col-xs-6">
15                     <!-- small box -->
16                     <div :class="exam_part_style[a]">
17                         <div class="inner">
18                             <h3>150</h3>
19                             <p>New Orders</p>
20 
21                         </div>
22                         <div class="icon">
23                             <i class="ion ion-ios-paper"></i>
24                         </div>
25                         <a href="#" class="small-box-footer">More info <i class="fa fa-arrow-circle-right"></i></a>
26                     </div>
27                 </div>
28                 <!-- ./col -->
29 
30             </div>
31         </div>
32 
33 
34     </section>
35     <!-- /.content -->
36     {{-- 控制 复习测试的 的vue--}}
37     <script>
38         new Vue({
39             el:'#review_exam_part',
40             data:{
41                 exam_part_style:[
42                     'small-box exam_part_color_1',
43                     'small-box exam_part_color_2',
44                     'small-box exam_part_color_3',
45                     'small-box exam_part_color_4',
46                     'small-box exam_part_color_5',
47                     'small-box exam_part_color_6',
48                     'small-box exam_part_color_7',
49                     'small-box exam_part_color_8',
50                 ],
51             },
52             computed: {
53 
54             }
55         });
56     </script>
57 
58 @endsection