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

墨蓝 2022-09-04 00:51 227阅读 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

发表评论取消回复

表情：

评论列表（有 0 条评论，227人围观）

还没有评论，来说两句吧...

相关阅读

相关【Flutter 组件】002-基础组件：文本与样式

【Flutter 组件】002-基础组件：文本与样式文章目录【Flutter 组件】002-基础组件：文本与样式一、Text 1、概述

朱雀/ 2023年09月23日 18:31/ 0 赞/ 80 阅读

相关修改Element-ui组件的样式无效？

框架vue2.0，使用element中自有些组件样式不合心意，但是在style中改不过来？ 1，想将某个组件样式全局统一，通过控制台f12查看组件类名，在App.vue的s

缺乏、安全感/ 2023年06月24日 04:47/ 0 赞/ 190 阅读

相关 vue sass 组件样式穿透

vue中经常引入第三方组件，而第三方组件有时会无法满足需求，这时就需要自定义组件样式第一种方式，直接在全局样式修改，这种方式会全局覆盖修改后的组件样式 <sty

淡淡的烟草味﹌/ 2022年09月11日 13:22/ 0 赞/ 207 阅读

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

vue中组件循环获取样式场景： ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR

墨蓝/ 2022年09月04日 00:51/ 0 赞/ 228 阅读

相关 vue组件样式

背景使用嵌套组件时，样式往往会覆盖，即子组件的样式会覆盖App.vue的样式比如App.vue的h1标签的颜色是红色，User.vue的h1是绿色，但运行时，都变成

约定不等于承诺〃/ 2021年12月12日 00:19/ 0 赞/ 335 阅读

相关 react组件，样式添加的方法

1.react组件，行内样式，添加格式： ![534144-20190711091135588-502132190.png][] 解析为： ![534144-201

短命女/ 2021年11月10日 02:58/ 0 赞/ 321 阅读

相关 ExtJs组件的获取方式

需求 ExtJs中有多种捕捉元素的方法,其中Ext.get(),Ext.select(),Ext.query()是获得的dom，不是获得的Ext定义组件。 ExtJS

àì夳堔傛蜴生んèń/ 2021年09月14日 10:48/ 0 赞/ 485 阅读

相关获取component组件的参数

![20200820150207120.png][] ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6

逃离我推掉我的手/ 2021年07月24日 23:33/ 0 赞/ 352 阅读

相关 mpvue 组件循环并动态赋值

引用页 <template> <div id> <div>  <!--把item,

小咪咪/ 2021年07月24日 23:30/ 0 赞/ 382 阅读

相关 uni-app 修改 radio/checkbox/switch 组件样式

我们在用 uni-app 开发前端页面时，往往需要修改一些组件的默认样式，特别是颜色。那么如何修改 radio/checkbox/switch（单选框/复选框/开关）的样...

朱雀/ 2021年03月29日 10:48/ 0 赞/ 3458 阅读