Vue2代码未渲染todo列表，显示{{ todo.text }}，求问题排查与解决

错误点 #

你的代码存在JavaScript语法错误：Vue实例的初始化代码未正确闭合。在data选项的闭合大括号后，缺少结束Vue构造函数调用的});，导致浏览器无法正确解析脚本，Vue无法完成初始化，模板也就不会被编译渲染，最终直接显示未解析的Mustache语法{{ todo.text }}。

修复后的完整代码 #

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width,initial-scale=1.0" />
    <title>Vue2 Test</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2" ></script>
  </head>
<body>
<div id="app-4">
  <ol>
    <li v-for="todo in todos">
      {{ todo.text }}
    </li>
  </ol>
</div>

<script>
var app4 = new Vue({
  el: '#app-4',
  data: {
    todos: [
      { text: 'Learn JavaScript' },
      { text: 'Learn Vue' },
      { text: 'Build something awesome' }
    ]
  }
}); // 补充这行闭合代码
</script>
</body>
</html>

修复效果 #

补充闭合代码后，Vue会正常初始化并编译模板，v-for指令会遍历todos数组，将每个todo的text值渲染为列表项内容，最终显示预期的待办事项列表。

内容的提问来源于stack exchange，提问作者tanzeem