vue.js - vue一个属性有多个字段，如何通过循环给值

问题描述

问 题

我想直接通过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
        }
    });

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

解决方案

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.js - vue一个属性有多个字段，如何通过循环给值的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！