javascript - Vue新手,求解,在组件中如何使用v-for指令
本文介绍了javascript - Vue新手,求解,在组件中如何使用v-for指令的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
问 题
在介绍问题之前先贴上代码
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标签
解决方案
var zhuanpanList=Vue.extend({ //定义一个子组件,组件内的li标签想v-for出来
template:'<li><img :src=item.src /></li>',
props:['item']
});
var zhuanpan=Vue.extend({ //定义父组件,在父组件内部注册子组件
template:'<div class="zhuangpan auto position-relative"><ul class="position-relative clearfix" id="zhuangpan"><zhuanpan-list v-for="item in choujiangListImg" :item="item"></zhuanpan-list></div></ul>',
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
}
})
这篇关于javascript - Vue新手,求解,在组件中如何使用v-for指令的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文