Vue.js 在vue js中，模板中只显示一个列表_Vue.js_Vuejs2_Vue Component

Vue.js 在vue js中，模板中只显示一个列表

vue.js vuejs2

Vue.js 在vue js中，模板中只显示一个列表,vue.js,vuejs2,vue-component,Vue.js,Vuejs2,Vue Component,我正处于vue.js的学习阶段，以下是我的index.html代码： <html> <head> <link rel="stylesheet" href="index.css"> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> </head> <body>

我正处于

vue.js

的学习阶段，以下是我的

index.html

代码：

<html>
    <head>
        <link rel="stylesheet" href="index.css">
        <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    </head>
    <body>

        <div id="app">
            <ul>
                <todo-item></todo-item>
            </ul>
        </div>

        <script src="index.js"></script>
    </body>
</html>

Vue.component('todo-item', {
  template: '<li>Todo 1</li><li>Todo 2</li>'
})

var app = new Vue({
  el: '#app'
})

现在在输出中，我只得到一个Todo 1，而不是第二个Todo 2。有人能告诉我为什么会这样吗

如果我在index.html中重复了

，那么它是在重复Todo 1，它不应该在Todo 1之后显示Todo 2吗？

我得到了答案，这是因为

组件模板应该只包含一个根元素

我在同一个模板中使用了两个

，没有根元素

因此，我在模板中更改为

template: '<ul><li>This is a todo</li><li>Another work</li></ul>'

模板：'这是一个待办事项
另一个工作'

并从index.html中删除了

。它现在工作正常。

将

元素放入模板中，它就应该工作了。