已知现有20个div容器，每个div容器具有一个独特的id，且每个id对应一个属性很多的对象数组，如何让这20个容器使用统一的内容，列如“负责人： 工艺负责人： 工位编号：” 并根据div容器的id，动态将数组中的某3个属性数据填入到上述类容中

为了实现这个需求，你可以使用 Vue 的 `v-for`指令和计算属性来遍历对象数组，并动态渲染内容。首先，确保你的数据结构类似于这样：

data() {
  return {
    items: [
      { id: '1', name: '负责人', role1: '张三', role2: '李四', position: 'A001' },
      ... // 其他19个对象，类似上例
    ],
    templateString: '负责人: {{ item.role1 }}\n工艺负责人: {{ item.role2 }}\n工位编号: {{ item.position }}\n',
  };
},

然后，在模板（HTML）部分，使用 `v-for` 来迭代 `items` 数组：

<div v-for="(item, index) in items" :key="index">
  <p>{{ templateString.replace(/{{ (role1|role2|position) }}/g, item.$1) }}</p>
</div>

这里的关键在于 `templateString` 中的占位符 `{{ role1|role2|position }}`，它们会被 `item` 对象的相应属性值替换。`replace` 方法用于查找匹配项并用实际值替换。

如果你有多个可能的属性名，可以在模板字符串里添加更多的条件判断，或者使用一个计算属性来处理映射关系：

computed: {
  formattedTemplate() {
    return this.templateString.replace(/\{\{\s*(role1|role2|position)\s*\}\}/g, (_, key) => this.items[0][key]);
  }
},

现在，`formattedTemplate` 计算属性会返回一个已替换好属性值的新字符串，你只需要在循环中使用这个计算属性即可：

<p v-text="formattedTemplate"></p>

这样，每个 div 容器都会显示对应的三个属性值。