<!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>
时间： 2024-10-29 19:07:22