在文档 (DOM) 中创建 div 的问题答案

【问题标题】：Problem with creating a div into the document (DOM)在文档 (DOM) 中创建 div 的问题
【发布时间】：2019-05-16 07:38:48
【问题描述】：

我对这个片段有一些问题，它在 DOM 中创建了一个 div，以便 div 正常出现在每个页面中，这是一个图像。

如何更改它，以便仅在我访问此自定义组件 (Model.vue) 时创建此 div，并且在我离开组件页面后不再可见。

谢谢！！

container = document.createElement( 'div' );
document.body.appendChild( container );

【问题讨论】：

标签： vue.js

【解决方案1】：

如果您的 HTML 是可预测的，您可能应该将其添加到模板中（作为 HTML 或作为组件），然后使用 v-if 或 v-show 显示/隐藏它

如果您需要静态内容，例如取决于用户输入，那么v-html is the way。

如果您需要动态内容（例如带有事件绑定），请查看render functions。

还有dynamic component 和<component :is="someComponent"> 一样，其中someComponent 可以是组件的字符串名称，也可以是组件本身。但您可能应该先尝试其他解决方案。

【讨论】：

【解决方案2】：

首先，直接 DOM 操作（添加/删除元素）在 vuejs 中根本不受欢迎。您可以使用 v-if 来有条件地显示元素。

或者如果你仍然想直接操作，那么你可以在你的model.vue组件的mounted hook中编写上面的代码行。

mounted() {
  container = document.createElement('div');
  container.setAttribute("id", "divId");
}

然后在销毁之前的钩子中，您可以从 DOM 中删除该元素，如下所示。

beforeDestroy() {
  var elem = document.querySelector('#divId');
  elem.parentNode.removeChild(elem);
}

【讨论】：

谢谢！这很好，但由于某种原因，一旦我进入另一个页面，我就无法再输入文本了
“首先，直接 DOM 操作（添加/删除元素）在 vuejs 中根本不受欢迎。”我不应该提供这个答案。 OP有错误的方法。这并不意味着您的答案应该建立在相同的错误方法上。它促进了错误的做法。