Question

我有一个组件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>？

Answer 1

使用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>

Answer 2

Vue通过创建模板为您提供了这样做的工具，或者您可以通过将父div与两个父div作为子项来实现。从数据功能重置数据。坚持使用约定（创建模板）。当你有jQuery背景时，很难习惯使用Vue。 Vue更好

实施例

data () {
 message: 'My message'
}

单击按钮以显示新消息时。清除消息或仅使用新值设置消息变量。恩。 this.message =＆＃39;新消息＆＃39;

如果你想展示另一个div。你应该使用if - else语句并添加一个反应变量。防爆。 showDivOne

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

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

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

Answer 3

我认为您可以使用v-if指令进行控制。将标记添加到控件状态以显示或隐藏