Vue新手，求解，在组件中如何使用v-for指令-Soal Jawab Rangkaian PHP Cina

在介绍问题之前先贴上代码

var zhuanpanList=Vue.extend({ //定义一个子组件，组件内的li标签想v-for出来 template:'
' }); var zhuanpan=Vue.extend({ //定义父组件，在父组件内部注册子组件 template:'
', 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标签

membalas semua (4)

代言2016-11-09 11:31:50 Tingkat 4

var zhuanpanList=Vue.extend({ //定义一个子组件，组件内的li标签想v-for出来 template:'

', props:['item'] }); var zhuanpan=Vue.extend({ //定义父组件，在父组件内部注册子组件 template:'

', 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 } })

Suka+0

Tambah Balasan

三叔2016-11-09 11:31:33 Tingkat 3

是子组件和父组件作用域的问题

代言2016-11-09 11:31:21 Tingkat 2

简单来说，子组件和父组件作用域的问题

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"}, ] } } });