在介绍问题之前先贴上代码
var zhuanpanList=Vue.extend({ //定义一个子组件,组件内的li标签想v-for出来 template:'<ul class="position-relative clearfix" id="zhuangpan"><li v-for="item in choujiangListImg"><img v-bind:src=item.src /></li></ul>' }); var zhuanpan=Vue.extend({ //定义父组件,在父组件内部注册子组件 template:'<div class="zhuangpan auto position-relative"><zhuanpan-list></zhuanpan-list></div>', components:{ 'zhuanpan-list':zhuanpanList } }); var vm=new Vue({ el: '#app', data: { sildeMsg: [ { message: '全家桶(必胜客赞助)1' }, { message: '全家桶(必胜客赞助)2' }, { message: '全家桶(必胜客赞助)3' } ], choujiangListImg:[ {src:"images/putaojiu.jpg"}, {src:"images/leshi.jpg"}, {src:"images/shenmi.jpg"}, {src:"images/phone7.jpg"}, {src:"images/xiaomi.jpg"}, {src:"images/coupons-100.jpg"}, {src:"images/none.jpg"}, {src:"images/coupons-20.jpg"}, ] }, components:{ 'zhuanpan':zhuanpan } })
其实我想做的很简单,就是想通过v-for指令,在子组件内部动态构造出li标签,但是在官网上找了找好像没有在组件内部去使用v-for指令的例子,是不是我的逻辑本来就是错的,组件不是这样使用的?那么大家在当组件是一个列表的时候,那么又改怎么做,难道在页面通过v-for指令?而不是在组件内实现? 我现在这样写,浏览器没有报错,但是在ul标签内却是没有任何的li标签
是子组件和父组件作用域的问题
简单来说,子组件和父组件作用域的问题
choujiangListImg 应该放在 zhuanpanList 里
', data: function() { return { choujiangListImg:[ {src:"images/putaojiu.jpg"}, {src:"images/leshi.jpg"}, {src:"images/shenmi.jpg"}, {src:"images/phone7.jpg"}, {src:"images/xiaomi.jpg"}, {src:"images/coupons-100.jpg"}, {src:"images/none.jpg"}, {src:"images/coupons-20.jpg"}, ] } } });
你要在子组件渲染 choujiangListImg 这个数组,但是这个数组却是在父组件定义的,所以你最好仔细看下文档
现在vue1.0的中文文档不知道哪去了,只有英文版了