Vue动态进度条排序：如何实现长度不定、奇偶行反向渲染的进度条？-css教程-PHP中文网

Vue动态进度条排序：如何实现长度不定、奇偶行反向渲染的进度条？

碧海醫心

发布： 2025-02-22 17:08:01

原创

384人浏览过

vue动态进度条排序：如何实现长度不定、奇偶行反向渲染的进度条？

Vue动态进度条：实现长度不定、奇偶行反向渲染

本文将讲解如何使用Vue.js创建一个动态进度条，其特点是：进度条数量不定，且奇数行从左到右渲染，偶数行从右到左渲染。

实现方案：

我们将通过以下步骤实现该功能：

立即学习“前端免费学习笔记（深入）”；

数据绑定： 使用v-for指令循环渲染进度条组件。
样式控制： 使用CSS的nth-child伪类选择器和Flexbox布局来控制进度条的排列顺序和方向。
动态宽度： 通过数据绑定动态设置每个进度条的宽度。

代码示例：

豆绘AI

豆绘AI是国内领先的AI绘图与设计平台，支持照片、设计、绘画的一键生成。

485

查看详情

HTML (template):

<code class="html"><template>
  <div class="progress-container">
    <div v-for="(item, index) in progressData" :key="index" 
         :class="{'progress-bar-even': index % 2 === 1}"
         :style="{ width: item.percentage + '%' }">
    </div>
  </div>
</template></code>

登录后复制

CSS:

<code class="css">.progress-container {
  display: flex;
  flex-wrap: wrap; /* 允许换行 */
}

.progress-bar {
  height: 20px;
  background-color: #4CAF50;
  margin: 5px; /* 添加间距 */
}

.progress-bar-even {
  margin-left: auto; /* 自动拉伸到容器右侧 */
  margin-right: 5px; /* 保持间距 */
}</code>

登录后复制

Vue.js (script):

<code class="javascript"><script>
export default {
  data() {
    return {
      progressData: [
        { percentage: 25 },
        { percentage: 75 },
        { percentage: 50 },
        { percentage: 90 },
        { percentage: 30 }
        // ...更多数据
      ]
    };
  }
};
</script></code>

登录后复制

代码说明：