<!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>
