Vue.js：用户单击按钮时加载模板（或div）吗？

Question

所以我目前有一个模板，位于“ .vue”文件中，如下所示：

<template>
  <div id="dataAttachToMe"></div>
</template>

我不希望加载它，除非用户单击一个按钮，例如

<button @click="loadTheTemplateAbove">See Data</button>

我尝试使用以下示例：https://vuejs.org/v2/guide/conditional.html#Controlling-Reusable-Elements-with-key。但是它在错误消息中说“组件模板应该只包含一个根元素”。

我认为，我需要的不仅仅是显示/隐藏，还可以动态启动模板。

<template>
  <div id="data">
    <button @click="loadTemplate">Load the template</button>
    <div v-if="buttonClicked">
      <div id="dataAttachedToThisDiv"></div>
    </div>
  </div>
</template>

Answer 1

您得到的错误意味着<template></template>标记内有多个根元素。

在Vue.js（以及其他基于模板的框架/库）中，必须只有一个根元素。

此不能起作用：

<template>
  <div id="dataAttachToMe"></div>
  <button @click="loadTheTemplateAbove">See Data</button>
</template>

此将起作用：

<template>
  <div id="someRootDiv">
    <div id="dataAttachToMe">Some data</div>
    <button @click="loadTheTemplateAbove">See Data</button>
  </div>
</template>

以下是您要实现的代码示例（App.vue）：

基本思想：我们必须创建一个变量，单击按钮后将对其进行更改。我们添加了v-if指令，该指令取决于该变量，并将处理元素的可见性。

Answer 2

欢迎使用StackOverflow。当您收到错误Component template should contain exactly one root element时，这意味着template中只能包含one root element。您可以通过将所有内容包装在空白div中来解决该错误

 <template>
  <div>
    <template v-if="loginType === 'username'">
      <label>Username</label>
      <input placeholder="Enter your username">
    </template>
    <template v-else>
      <label>Email</label>
      <input placeholder="Enter your email address">
    </template>
  </div>
</template>

请编辑您的信息并放置<script>标签。条件渲染需要布尔值的数据字段，您可以将其放在模板上的if语句中

<template>
 <div>
    <div v-if="show">{{message}}</div>
    <div v-if="@show">Not Showing when show is set to false</div>
     <button v-on:click="show = true">Show</button>
 </div>
</template>
<script>
module.exports {
  data: function () {
    message: 'Hello Vue!',
    show: false
  }
}
</script>