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循环出来的元素设置不同的样式
转自或参考: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个不同序号的元素添加不同的样式 实例
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