【vue】vue组件循环获取样式

墨蓝 2022-09-04 00:51 250阅读 0赞

# vue中组件循环获取样式 #

场景：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3MxNDQxMTAxMjY1_size_16_color_FFFFFF_t_70]  
首先，组件内定义一个颜色数组，然后就是循环调用组件的时候，每个组件的颜色都不同。  
在修改的时候，发现可以用下标来实现，然后就是计算数值。  
在测试过程中，发现了一个简单的方法：% 取整。  
比如颜色有三个。第五个循环取色，那就是第二个橘黄色。传入组件内下标4。  
然后4%3=1，这个1就是颜色数组内对应的颜色。

# 代码 #

<template>
      <div class="public-dept-task">
        <i class="fa fa-bookmark" aria-hidden="true" :style="[{ color: getColor }]" ></i>
        <div class="content">
          <div class="title">{
       { data.dutyname }}</div>
          <div class="info">{
       { data.remark }}</div>
        </div>
      </div>
    </template>
    <script> export default { name: 'public-dept-task', data() { return { colors: ['#e43d39', '#ff7800', '#ffa352'] } }, props: { data: { type: Object, default: () => ({ }) }, index: { type: Number } }, components: { }, computed: { getColor() { let index2 = this.index return this.colors[index2 % this.colors.length] } }, created() { }, onload() { }, onShow() { }, watch: { }, mounted() { }, methods: { } } </script>
    <style lang="less" scoped> .public-dept-task { display: flex; height: 60px; .fa { width: 50px; font-size: 65px; } .content { .title { font-size: 13px; color: black; } .info { font-size: 15px; color: #999; } } } </style>

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3MxNDQxMTAxMjY1_size_16_color_FFFFFF_t_70]: /images/20220829/ffa5d7d3b4f9417f90824ab2ee7a2b03.png