Bootstrap

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

这里用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>

这里想要让进度条的status和percentage为item下的值,这时候加上冒号也就是v-bind直接在等号里面写下item下的值就行了. 这时候不需要{{}}就可以动态绑定循环体里的值,同理动态style等也是一样的做法

;