javascript - Vue渲染简单数组？

Question

有个数组var arr = [1,2,3,4]

用v-for指令如何渲染？我试着这样：

<ul v-for="item in arr">
    <li>{{ item }}</li>
</ul>

结果报错

求教，谢谢~

Answer 1

你不应该把v-for绑定到ul上，应该写在<li>标签里。试试看，在一个就是你的data里可能没有arr这个数据

正确写法

<p id="app">
    <ul>
        <li v-for="item in arr">{{ item }}</li>
    </ul>
</p>

多看官网上的说明，你会明白的

Answer 2

<app>
  <ul v-for="item in [1, 2, 3, 4]">
    <li>{{ item }}</li>
  </ul>
  <hr>
  <ul v-for="item in arr">
    <li>{{ item }}</li>
  </ul>
</app>

new Vue({
  el: 'app',
  data: {
    arr: [1, 2, 3, 4]
  },
})

Answer 3

<p id="app">
    <ul v-for="item in arr">
        <li>{{ item }}</li>
    </ul>
</p>

new Vue({
    el:'#app'
    data:{
        arr:[1,2,3,4]
    }
})