Vue循环时动态绑定一些值到组件中的属性中实现动态属性值

半开半落

于 2022-08-02 15:06:18 发布

阅读量1.3k

点赞数

分类专栏：前端文章标签：大前端

本文链接：https://blog.youkuaiyun.com/weixin_44418100/article/details/126122639

版权

前端专栏收录该内容

35 篇文章

订阅专栏

本文通过Element UI中的卡片组件和进度条，展示了如何在循环中动态绑定数据，包括status和percentage属性的使用，以及如何应用样式如proSpanColor_RE。适合前端开发者学习组件动态更新技巧。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

这里用elementUI里卡片组件和进度条为例子展示

				<el-card class="box-card" v-for="(item, index) in recvList" :key="index">
                  <div class="box_card_body">
                    <div class="progre pro_recycle">
                      <el-progress
                        :show-text="false"
                        :stroke-width="15"
                        :status="item.status"
                        :percentage="Math.ceil(item.recv_count/item.all_count*100)"
                      ></el-progress>
                    </div>
                    <span class="percolor" :style="proSpanColor_RE">{{ item.recv_count }}</span>
                  </div>
                </el-card>