是否可以从模板中删除“div”？答案

【问题标题】：Is it posible to delete `div` from template?是否可以从模板中删除“div”？
【发布时间】：2017-08-19 06:32:19
【问题描述】：

我有一个组件myHello：

<temlate>
    <div>
       <h2>Hello</h1>
       <p>world</p>
    </div>
</template>

主要成分：

<h1>my hello:</h1>
<my-hello><my-hello>

渲染后显示如下：

<h1>my hello:</h1>
<div>
   <h2>Hello</h1>
   <p>world</p>
</div>

如何删除<div>？

【问题讨论】：

你为什么要这样做？有两种方法可以做到这一点，但是.. 为什么？
@AmreshVenugopal 这只是我想要的例子:) 但它确实需要实现，但我不知道如何
那么，如果将div 替换为template 会发生什么？我的意思是让第一个template标签保持原样，把你想删除的div也替换为``template`。

【解决方案1】：

我认为你可以使用v-if 指令来控制。添加一个标志来控制状态以显示或隐藏

【讨论】：

【解决方案2】：

Vue 通过创建模板为您提供了执行此操作的工具，或者您可以通过将一个父 div 和两个父 div 作为子级来实现。从数据函数中重置数据。坚持惯例（创建模板）。当你有 jQuery 背景时，很难习惯使用 Vue。 Vue更好

例如

data () {
 message: 'My message'
}

当您单击按钮以显示新消息时。清除消息或仅使用新值设置消息变量。前任。 this.message = '新消息'

如果你想显示另一个 div。您应该使用 if - else 语句并添加一个反应变量。前任。显示DivOne

data () {
   message: 'My message'
   showDivOne: true,
   showDivTwo: false
}

将此反应变量添加到与该 div 对应的父 div 中。单击按钮时，您应该具有类似...的功能。

methods: {
 buttonClick () {
  this.showDivOne = false
  this.showDivTwo = true
 }
}

【讨论】：

【解决方案3】：

使用 VueJS，每个组件必须只有一个根元素。 upgrade guide 谈到了这一点。如果它让你感觉更好，那你就不是alone。 components section 值得一读。

您的问题有无数种解决方案，这里有一个。

组件myHello:

<temlate>
  <h2>Hello</h1>
</template>

组件myWorld:

<temlate>
  <p>world</p>
</template>

组件main

<h1>my hello:</h1>
<my-hello><my-hello>
<my-world><my-world>

【讨论】：