在vue2中如何让div容器中显示templateString: ‘负责人: {{ item.role1 }}\n工艺负责人: {{ item.role2 }}\n工位编号: {{ item.position }}\n’, };，不用v-bind的形式

在 Vue 2 中，如果你想在 `div` 容器中动态渲染模板字符串，但又不想使用 `v-bind` 指令，你可以使用 JavaScript 的 `innerHTML` 属性结合计算属性（Computed Properties）来实现。首先，确保你有一个数据对象 (`item`) 存储了你需要的数据。

<div id="app">
  <p v-if="displayTemplate">{{ displayTemplate }}</p>
</div>

<script>
export default {
  data() {
    return {
      item: { role1: '张三', role2: '李四', position: '001' },
      displayTemplate: ''
    };
  },
  computed: {
    // 使用计算属性创建一个方法，接收 item 数据并返回渲染后的字符串
    formattedTemplate() {
      return `
        负责人: ${this.item.role1}\n
        工艺负责人: ${this.item.role2}\n
        工位编号: ${this.item.position}
      `;
    }
  },
  created() {
    // 在实例创建时设置 displayTemplate
    this.displayTemplate = this.formattedTemplate;
  }
};
</script>

在这个例子中：

- 我们定义了一个名为 `formattedTemplate` 的计算属性，它根据 `item` 对象的内容动态生成 HTML。
- 在 `created` 钩子函数中，我们将这个计算属性的结果赋值给 `displayTemplate`，这样当 `item` 发生变化时，`div` 中的内容也会相应更新。
- 使用了 `v-if="displayTemplate"` 来避免在未初始化时显示任何内容。

现在，在浏览器中运行这段代码，`div` 就会显示你提供的模板字符串。如果你有其他问题或想深入了解的地方，请告诉我。