<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> <div id="app"> <!-- <ol> <li v-for="item in groceryList"> {{item.text}} </li> </ol> --> <!--上面的代码ol和下面的ol可达到同样的效果--> <ol> <li> <table> <todo-item v-for="item in groceryList" v-bind:todo="item"></todo-item> </table> </li> </ol> </div> </body> <script type="text/javascript" src="js/vue.js"></script> <script type="text/javascript"> Vue.component('todo-item',{ // 注册一个全局组件 props: ['todo'], //使用 props 传输资料予子组件 通过todo传输 template: '<tr><td>{{todo.name}}</td><td>{{todo.age}}</td><td>{{todo.sex}}</td></tr>' // 建立个模型 }) var app1= new Vue({ //创建一个 Vue 实例： el: '#app', data: { groceryList: [ {name: '张三，',age:'22，',sex:'女'}, {name: '李四，',age:'21，',sex:'男'}, {name: '王五，',age:'20，',sex:'女'}, {name: '赵六，',age:'22，',sex:'男'}, {name: '李七，',age:'18，',sex:'女'}, ] } }) app1.groceryList.push({text:'dddddd'}) </script> </html>