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

柔情只为你懂 2022-01-25 22:43 1473阅读 0赞

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

<template>  
<div>  
<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>  
</div>  
</template>  
<script>  
export default \{  
data() \{  
return \{  
sstt: \[  
"ss1",  
"ss2",  
"ss3",  
"ss4",  
\],  
serve: \[  
\{  
title: "苹果",  
english: "123"  
\},  
\{  
title: "桃子",  
english: "456"  
\},  
\{  
title: "香蕉",  
english: "789"  
\},  
\{  
title: "梨",  
english: "1010"  
\}  
  
\]  
  
  
\}

\}  
\}  
</script>  
<style>  
.ss1\{  
background: \#71b262;  
color: red;  
\}  
.ss2\{  
background: \#6288b2;  
\}  
.ss3 \{  
background: \#ecac60;  
\}  
.ss4\{  
background: \#f87171;  
\}

</style>

**例如给循环出来的四个盒子设置不同的背景色**  
第一步：给要循环的盒子动态绑定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;
      }

完成啦  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDYxMzI5NA_size_16_color_FFFFFF_t_70]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDYxMzI5NA_size_16_color_FFFFFF_t_70]: /images/20220126/bc3803ff4a7348b4b67339a18520e664.png