Vue V-for给循环数组输出的每一个值添加各自的样式 记录一下

首先，还是一样先写个循环数组。

<div v-for="arry in arrys" :key="arry.id" :value="arry.value" :label="arry.label">

    <div>{{arry.name}}</div>

</div>

<script>

export default {

name: "ceshi",

data() {

return {

     arrys: [

          {

                         id: 1,

                          name: "可乐",

          },

          {

                            id: 2,

                            name: "雪碧",

           },

           {

                           id: 3,

                           name: "橙子",

            }

        ]

     }

  }

}

</script>

然后 给这句话重新书写下  v-for="arry in arrys" 写成 v-for="（arry,index）in arrys"

index是干嘛的 我个人理解为对应data里面的id  

贴个小李子

<template>

  <div>

    <div v-for="（arry,index） in arrys" :key="arry.id" :value="arry.value" :label="arry.label">

       <div :class="ast[index]">    

          <div>{{arry.name}}</div>

         </div>  

      </div>

   </div>

</template>

<script>

export default {

name: "ceshi",

data() {

return {

     ast:[ 's1','s2','s3',],

     arrys: [

          {

                         id: 1,

                          name: "可乐",

          },

          {

                            id: 2,

                            name: "雪碧",

           },

           {

                           id: 3,

                           name: "橙子",

            }

        ]

     }

  }

}

</script>

<style scoped>

.s1{

color:#22d7bb;

background:#888;

}

.s2{

color:red;

background:#e7e7e7;

}

 .s3{

color:pink;

background:yellow;

}

</style>

这个 ast:[ 's1','s2','s3',], 对应 id 有多少个id 可以都写上 然后再去样式里命名然后给其添加样式就可以了

接下来 附上效果图

对应的样式名也出来了。然后就每一行的样式都修改到了。

个人理解，个中不足 望指出