广州品牌网站设计公司/百度竞价排名平台
现在实现一个循环列表的组件
我们把这个组件的prop子单元和父单元进行拆分
便于我们任意编辑子单元的内容而不会影响父单元
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>自定义组件：循环输出内容</title><script src="./js/vue.js" type="text/javascript" charset="utf-8"></script>
</head>
<body><div id="app"><ol><!-- 1、绑定对象todo 2、将循环输出的item组件绑定一个key值 --><todo-item v-for="item in glists"v-bind:todo='item'v-bind:key='item.id'></todo-item></ol></div><script>Vue.component('todo-item',{props:['todo'],template:'<li>{{todo.text}}</li>'})var app=new Vue({el:'#app',data:{glists:[{id:0,text:'1111'},{id:1,text:'222'},{id:2,text:'333'}]}})</script>
</body>
</html>
结果：
1、1111
2、222
3、333