Javascript Vue.js v-for，带有额外的li和#x27；不渲染

我有一个ul的项目来自循环，然后额外的李之后

<ul>
  <todo-item v-for="(todo,index) in todos" v-bind:todo="todo" :key="index" />
  <li :key='"new_item"'>
    <input placeholder="What needs to be done?" type="text" v-model="new_todo" >
    <button v-on:click="add_todo()">Add</button>
  </li>
</ul>  

添加

这没有显示额外的行。但如果我把它换成额外的李是第一个它会

<ul>
  <li :key='"new_item"'>
    <input placeholder="What needs to be done?" type="text" v-model="new_todo" >
    <button v-on:click="add_todo()">Add</button>
  </li>
  <todo-item v-for="(todo,index) in todos" v-bind:todo="todo" :key="index" />
</ul>  

添加

所以我可能是把钥匙弄错了，但我找不到确切的原因

---

.

您使用SFC还是常用的HTML文件？ 可能问题在于HTML解析器不允许在

内部使用

。尝试使用

（它在您的代码笔中起作用）

待办事项



添加


您已完成{{done}/{{total}

---

问题在于vue组件需要一个关闭标记，并且仅使用自动关闭标记无法正常工作

试一试：

<ul>
  <todo-item v-for="(todo,index) in todos" v-bind:todo="todo" :key="index"></todo-item>
  <li :key='"new_item"'>
    <input placeholder="What needs to be done?" type="text" v-model="new_todo" >
    <button v-on:click="add_todo()">Add</button>
  </li>
</ul>  

添加

官员说：

自关闭的组件表示它们不仅没有 内容，但意味着没有内容。这是两者的区别 一本书中的空白页和标有“这一页故意留下”的一页 空白。”您的代码也更干净，没有不必要的结束标记

不幸的是，HTML不允许自定义元素自动关闭- 只有官方的“无效”元素。这就是为什么这一战略只是 当Vue的模板编译器可以在 DOM，然后提供符合DOM规范的HTML

---

您不允许使用自动关闭标签，因此请使用

---

似乎不是有效的HTML5组件。

更改为

，然后重试。检查每个人都提到的自动关闭标记规则是否正确，但也令人困惑，因为它仅适用于模板是“in-DOM”模板的情况，也就是说，模板在DOM中的某个点呈现。如果使用字符串模板或单个文件组件，则该问题不适用。您的代码在字符串模板中按原样工作。为了将来的参考，这只适用于DOM模板中的。这是我的第一个想法，并且它肯定适用于具有

ul

的表，至少在我的chrome版本中是如此。我同意文档中的

ul

应该受到影响，这似乎有点误导。

<ul>
  <todo-item v-for="(todo,index) in todos" v-bind:todo="todo" :key="index"></todo-item>
  <li :key='"new_item"'>
    <input placeholder="What needs to be done?" type="text" v-model="new_todo" >
    <button v-on:click="add_todo()">Add</button>
  </li>
</ul>