解决方案
v-for应该写在#app定义的内部,而不是平级
错误的代码,v-for 写在了#app平级
1 body>
2
3 <section id="app" v-for='item in monster'>
4 <table>
5 <tr>
6 <th>名称</th>
7 </tr>
8 <tr>
9 <td>{{item}}</td>
10 <td>{{item.name}}</td>
11 </tr>
12
13 </table>
14 </section>
15
16 <script>
17 var app = new Vue({
18 el: '#app',
19 data: {
20 monster: [
21 { name: '独眼蝙蝠', lv: 1, hp: 100 },
22 { name: '彭哚菇', lv: 3, hp: 300 }
23 ]
24 },
25 methods: {},
26 })
27 </script>
28 </body>
正确的代码,写在app定义的内部
1 <body>
2
3 <section id="app">
4 <table v-for='item in monster'>
5 <tr>
6 <th>名称</th>
7 </tr>
8 <tr>
9 <td>{{item}}</td>
10 <td>{{item.name}}</td>
11 </tr>
12
13 </table>
14 </section>
15
16 <script>
17 var app = new Vue({
18 el: '#app',
19 data: {
20 monster: [
21 { name: '独眼蝙蝠', lv: 1, hp: 100 },
22 { name: '彭哚菇', lv: 3, hp: 300 }
23 ]
24 },
25 methods: {},
26 })
27 </script>
28 </body>