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屋！