vue用for循环报if的错误

Question

<template>
  <div class="d1">{{msg}}</div>
  <ul>
    <li v-for='todo in todos'>
      {{ todo.text }}
    </li>
  </ul>
</template>

<script>
export default {
  name: 'hello',
  data () {
    return {
      msg: 'kkk vue',
      todos: [
        { text: 'aaa' },
        { text: 'bbb' },
        { text: 'ccc' }
      ]
    }
  }
}
</script>

错误提示是：

<div class="d1">{{msg}}</div>
<ul>
  <li v-for='todo in todos'>
    {{ todo.text }}
  </li>
</ul>

If you are using v-if on multiple elements, use v-else-if to chain them instead.

这是怎么回事呢

Answer 1

vue每个组件有且仅有一个根节点

Answer 2

把模板改成这样试试

<template>
    <div>
        <div class="d1">{{msg}}</div>
        <ul>
            <li v-for='todo in todos'>
                {{ todo.text }}
            </li>
        </ul>
    </div>
</template>

Answer 3

我用 jsfiddle 试了下代码，能正常运行

Answer 4

建议采用1楼2楼的方法