时间戳

首页 > 解决方案 > VUE - 为什么不在 VUE 中创建这个 DOM 元素？

javascript - VUE - 为什么不在 VUE 中创建这个 DOM 元素？

问题描述

问题：以下脚本创建了一个 div，并且应该附加到另一个 div。我正在尝试在此组件中实现 vanilla javascript。如何创建这个 DOM 元素？

这是组件：

<template>
<div class="backdrop" @click="closeModal">
    <div class="modal">
        <div id="elementContainer">{{ createDiv }}</div>
    </div>
</div>

<script>
    export default {

    props: [ 'elementSummary', 'elementName', 'elementSymbol', 'elementNumber', 'elementPhase', 
'elementShell', 'elementDensity' ],
    methods: {
     createDiv(){
        
        const newDiv = document.createElement('div')
        let divContainer = document.getElementById("elementContainer").appenedChild(newDiv)

  }
}

标签： javascriptvue.jsdommethodscreateelement

解决方案

它不起作用，因为您正在尝试插入函数定义。

如果您想在单击时附加一个新的 div，请在您的modal组件中创建一个本地化状态。在单击时切换该状态并使用v-if指令动态附加该 div

   export default {
      // vue component state
      data: function () { 
       return {
         showContent: false // we'll use this to show/hide the dynamic div
       }
      }, 

      props: [],

      methods: {
        /**
        * update state on click
        **/
        createDiv(){
         this.showContent = !this.showContent;
        }
      }
    }

在您的模板中

 <template>
  <div class="backdrop" @click="closeModal">
    <div class="modal">
      <div id="elementContainer">
        <div v-if="showContent>
           ...
        </div>
      </div>
    </div>
  </div>
 </template>

当showContent值更改时，vue将相应地删除或附加其附加v-if属性的子树。

推荐阅读