<!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> <todo-item v-for="item in groceryList" v-bind:todo="item"></todo-item> </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: '<li>{{todo.name}}{{todo.age}}{{todo.sex}}</li>' // 建立个模型 }) var app1= new Vue({ //创建一个 Vue 实例： el: '#app', data: { groceryList: [ {name:'张三'}, {age:22}, {sex:'女'} ] } }) </script> </html>