Vue新手,求解,在组件中如何使用v-for指令
高洛峰
高洛峰 2016-11-09 11:30:36
0
4
1289

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

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标签

高洛峰
高洛峰

拥有18年软件开发和IT教学经验。曾任多家上市公司技术总监、架构师、项目经理、高级软件工程师等职务。 网络人气名人讲师,...

Antworte allen(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   } })


    三叔

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

    代言

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

    choujiangListImg 应该放在 zhuanpanList 里

    var zhuanpanList=Vue.extend({   //定义一个子组件,组件内的li标签想v-for出来
      template:'
    ', 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的中文文档不知道哪去了,只有英文版了

    Beliebte Tutorials
    Mehr>
    Neueste Downloads
    Mehr>
    Web-Effekte
    Quellcode der Website
    Website-Materialien
    Frontend-Vorlage
    Über uns Haftungsausschluss Sitemap
    Chinesische PHP-Website:Online-PHP-Schulung für das Gemeinwohl,Helfen Sie PHP-Lernenden, sich schnell weiterzuentwickeln!