请举例说明，vue如何实现一个屏幕展示两个动态连接的图框

Vue可以通过使用组件和数据绑定来实现屏幕展示两个动态连接的图框。以下是一个简单的示例：

首先，我们需要创建两个组件：一个是图框组件（Box），另一个是连接线组件（Line）。

<!-- Box.vue -->
<template>
  <div class="box" :style="{ backgroundColor: color }">
    <Line v-if="showLine" :lineColor="lineColor" />
  </div>
</template>

<script>
import Line from './Line.vue';

export default {
  components: {
    Line,
  },
  props: {
    color: {
      type: String,
      required: true,
    },
    showLine: {
      type: Boolean,
      default: false,
    },
    lineColor: {
      type: String,
      default: 'black',
    },
  },
};
</script>

<!-- Line.vue -->
<template>
  <div class="line" :style="{ backgroundColor: lineColor }"></div>
</template>

<script>
export default {
  props: {
    lineColor: {
      type: String,
      required: true,
    },
  },
};
</script>

在父组件中，我们可以使用数据来控制图框和连线的展示情况。例如，我们可以使用一个数组来存储两个图框的颜色和是否展示连线的状态。

<template>
  <div>
    <Box v-for="(box, index) in boxes" :key="index" :color="box.color" :showLine="box.showLine" :lineColor="box.lineColor" />
  </div>
</template>

<script>
import Box from './Box.vue';

export default {
  components: {
    Box,
  },
  data() {
    return {
      boxes: [
        { color: 'red', showLine: true, lineColor: 'blue' },
        { color: 'green', showLine: false, lineColor: 'yellow' },
      ],
    };
  },
};
</script>

在上面的示例中，父组件通过v-for指令遍历boxes数组，并将每个图框的颜色、是否展示连线和连线的颜色作为props传递给Box组件。

这样，当boxes数组中的数据发生变化时，图框和连线的展示状态也会随之更新。你可以根据需要添加更多的图框和连接线，或者根据实际需求自定义组件的样式和行为。