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

在 Vue 2 中，如果你想在 `<div>` 容器中动态渲染模板字符串，你可以使用 JavaScript 的 `innerHTML` 属性结合模板插值语法。首先确保有一个 Vue 实例，并将数据绑定到这个实例上。然后，在组件的某个方法或计算属性中设置 `<div>` 的 `innerHTML`。

以下是一个简单的例子：

<div id="app">
  <button @click="displayData">显示数据</button>
  <div v-if="showTemplate" :key="uniqueKey">{{ templateString }}</div>
</div>

<script>
export default {
  data() {
    return {
      item: { role1: '张三', role2: '李四', position: '001' },
      showTemplate: false, // 初始时隐藏模板
      uniqueKey: Math.random().toString(36).substring(7), // 为了避免更新时重复渲染
      templateString: '',
    };
  },
  methods: {
    displayData() {
      this.showTemplate = true; // 显示模板
      this.templateString = '负责人: {{ item.role1 }}\n工艺负责人: {{ item.role2 }}\n工位编号: {{ item.position }}';
    }
  }
};
</script>

在这个例子中，当点击 "显示数据" 按钮时，`displayData` 方法会被调用，将 `showTemplate` 设置为 `true` 并更新 `templateString`。这会导致 `<div>` 元素中的文本被替换为模板字符串并根据 `item` 数据进行渲染。