vue.js无法添加代码

Question

我加了个<span>demo</span>就报错了，去掉就没一点事

加别的东西也不让加，加了就报错

又遇到这种情况的吗

Answer 1

template里面的内容需要被唯一一个标签包裹，你把span和button用一个div包起来就OK了

Answer 2

这样写试试：

components: {
    'bottom': Bottom
}

---

还有一点建议，别用这么直观的名字去命名组件，建议用两个单词以上来命名

例如：

//template
<my-bottom></my-bottom>

//script
components: {
    'my-bottom': Bottom
}

Answer 3

报错信息已经跟你说明是为什么原因了，vue组件里，所有的节点元素只能被一个父节点包裹。

有多种方式的时候可用if，else if 判断显示其中一个。
所以正确写法是：

<template>
  <div>
    <span>demo</span>
    <button></button>
  </div>
</template>

Answer 4

template里面只能有一个根节点元素，如果你需要多个根节点，请使用render函数，跳转门