怎么在vue中设置一个bar的样式，前段矩形显示蓝色的目标值，后段矩形显示橙色的完成值，矩形长度与数据大小相关

你可以使用 Vue 中的组件来创建这个 Bar，并通过绑定属性来控制矩形的样式和长度。以下是一个示例代码：

<template>
  <div class="bar-container">
    <div class="bar-target" :style="{ width: targetWidth }"></div>
    <div class="bar-complete" :style="{ width: completeWidth }"></div>
  </div>
</template>

<script>
export default {
  props: {
    target: {
      type: Number,
      required: true
    },
    complete: {
      type: Number,
      required: true
    }
  },
  computed: {
    targetWidth() {
      return `${this.target * 10}px`;
    },
    completeWidth() {
      return `${this.complete * 10}px`;
    }
  }
};
</script>

<style>
.bar-container {
  position: relative;
  height: 20px;
  background-color: #ccc;
}

.bar-target {
  position: absolute;
  height: 20px;
  background-color: blue;
}

.bar-complete {
  position: absolute;
  height: 20px;
  background-color: orange;
}
</style>

在这个示例中，我们创建了一个 Bar 组件，它接收两个属性：`target` 和 `complete`，分别表示目标值和完成值。我们通过计算属性来控制矩形的宽度，将目标值和完成值乘以 10，并加上 `px` 单位。最后，我们在组件的模板中渲染两个矩形，分别表示目标值和完成值，通过绑定 `style` 属性来控制它们的宽度。

你可以在父组件中使用这个 Bar 组件，并传入目标值和完成值，例如：

<template>
  <div>
    <bar :target="target" :complete="complete" />
  </div>
</template>

<script>
import Bar from "./Bar.vue";

export default {
  components: {
    Bar
  },
  data() {
    return {
      target: 5,
      complete: 3
    };
  }
};
</script>

在这个示例中，我们在父组件中引入了 Bar 组件，并传入了目标值为 5，完成值为 3。这将渲染出一个蓝色的矩形，宽度为 50px，和一个橙色的矩形，宽度为 30px。