vue一个属性有多个字段,如何通过循环给值

rocky191
  • 210

我想直接通过vue循环一个列表,基本实现vue循环,只是data-original这个属性我也想通过vue数组循环出来。下面是HTML代码

<li v-for="(item,index) in projectObject" :data-scroll-reveal="item.rs" v-cloak>
                                    <div class="listThumb js-listThumb">
                                        <div class="listInfo fontSize14">
                                            <p class="margin10">{{item.pi}}</p>
                                        </div>
                                        <img :src="item.iname"/>
                                    </div>
                                    <div class="marginTop10">
                                        <a class="psdA js-view" :data-info="item.di" :data-preview="item.dp" data-original="../uiImage/psd1OriginalImage1.png,../uiImage/psd1OriginalImage2.png,../uiImage/psd1OriginalImage3.png" :data-downAddress="item.dda">{{item.ln}}</a>
                                    </div>
                                    <div class="marginTop5 overflowHidden">
                                        <span class="js-author">{{item.pa}}</span>
                                    </div>
                                </li>

这是vue代码

var projectObject=[
        {
            "rs":"enter top",
            "pi":"网络管理事业部",
            "iname":"../images/slt1.png",
            "di":"mobile",
            "dp":'',
            "dda":"file/mobile/testMobile.rar",
            "ln":"性能日报",
            "pa":"越程程"
        }
    ];
new Vue({
        el:'#projectCon',
        data:{
            projectObject
        }
    });

这个要怎么做呢?能不能属性通过循环展示

回复
阅读 4k
2 个回答
✓ 已被采纳
var projectObject=[
        {
            "rs":"enter top",
            "pi":"网络管理事业部",
            "iname":"../images/slt1.png",
            "di":"mobile",
            "dp":'',
            "dda":"file/mobile/testMobile.rar",
            "ln":"性能日报",
            "pa":"越程程"
        }
    ];
new Vue({
        el:'#projectCon',
        data:{
            projectObject
        },
        computed:{
            key(){
              let arr = [];
              let projectObject = this.projectObject[0]
              for(let k in projectObject) {
                arr.push(k)
              }
              return arr
            }
  },
    });
<li v-for="(item,index) in projectObject" :data-scroll-reveal="item.rs" v-cloak>
                                <div class="listThumb js-listThumb">
                                    <div class="listInfo fontSize14">
                                        <!-- {{ key[index] }} -->
                                           <p>{{ key[1] }}</p>
                                        <p class="margin10">{{item.pi}}</p>
                                    </div>
                                    <img :src="item.iname"/>
                                </div>
                                <div class="marginTop10">
                                    <a class="psdA js-view" :data-info="item.di" :data-preview="item.dp" data-original="../uiImage/psd1OriginalImage1.png,../uiImage/psd1OriginalImage2.png,../uiImage/psd1OriginalImage3.png" :data-downAddress="item.dda">{{item.ln}}</a>
                                </div>
                                <div class="marginTop5 overflowHidden">
                                    <span class="js-author">{{item.pa}}</span>
                                </div>
                            </li>

vue实例化时加了如下代码循环添加属性

var dtOriginalArray=[
        {
            "oriArray":["../uiImage/psd1OriginalImage1.png","../uiImage/psd1OriginalImage2.png","../uiImage/psd1OriginalImage3.png"]
        },
        {
            "oriArray":["../uiImage/psd2OriginalImage1.png","../uiImage/psd2OriginalImage2.png","../uiImage/psd2OriginalImage3.png","../uiImage/psd2OriginalImage4.png","../uiImage/psd2OriginalImage5.png","../uiImage/psd2OriginalImage6.png","../uiImage/psd2OriginalImage7.png"]
        }
    ];
computed:{
            getOriginUrl:function(index){
              var arr = [];
              for(var i=0;i<dtOriginalArray.length;i++){
                   arr.push(dtOriginalArray[i]['oriArray']);
              }
              return arr
            }
          }

感谢wmui的解答

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
宣传栏