vue里不同數據的循環,其中的數組對象

用產品的屬性數據說明

頁面里顯示效果為:要把產品的屬性顯示到頁面上,產品屬性為后台自主上傳產品的屬性,產品的屬性不同,所以需要把屬性和屬性值顯示到頁面上

 

 

 

產品屬性數據為:

properties: "[

                    {"表面處理":["發黑","發白"]},

                    {"顏色":["紅色","黃色"]},

                    {"大小":["10mm","20mm"]}

              ]"

html代碼為:

<div class="row" v-for="(val, name, index) in properties" :key="index">  <!--循環外層數據-->
    <div v-for="(pro,key,index) in val" :key="index">   <!--顯示key,屬性-->
        <div class="left">
            <p>{{key}}</p>
        </div>
        <div class="center showHeight">
            <p class="spec filterorder shuxing" id="proper0">
                <span data-id="0" class="active">全部</span>
                <span data-id="" v-for="(val,i) in pro">{{val}}</span>  <!--屬性有多個,循環多個屬性顯示到頁面-->
            </p>
        </div>
        <div class="right" onclick="attrmore(this)">
            <img src="img/genduo.png" style="display: none;">
        </div>
    </div>
</div>

1.重點記錄一下類似於jquery中的key 與 value的顯示
以下是vue的寫法

val:{"表面處理":["發黑","發白"]}

 <div v-for="(pro,key,index) in val" :key="index">   <!--顯示key,屬性-->
        <div class="left">
            <p>{{key}}</p>   

　　　　　　　<p>{{por}}</p>

        </div>
</div>

2以下的例子jQuery的寫法

//加載屬性
    function propertieslist(data) {
        var properties=data.t.goodsInfo.properties;
        var proper=JSON.parse(properties);
        var attrrow='';
        var valueattr='';
        $("#gcipList").children().remove();
        var gcipTu = ' <div class="gcipTu">\n' +
            '            <img src="'+data.t.goodsInfo.mainPhotoUrl+'" alt="">\n' +
            '        </div><div class="row titlenow" id="titlenow"></div>';
        $("#gcipList").append(gcipTu);
        $.each(proper,function (i,obj) {
            var Ospan='<span data-id="0" class="active">全部</span>';
            for (key in obj){
                attrrow='<div class="row">\n' +
                    '                        <div class="left">\n' +
                    '                            <p>'+key+'</p>\n' +
                    '                        </div>\n' +
                    '                        <div class="center showHeight">\n' +
                    '                            <p class="spec filterorder shuxing" id="proper'+i+'">\n' +

                    '                            </p>\n' +
                    '                        </div>\n' +
                    '      <div class="right"  onclick="attrmore(this)">\n' +
                    '           <img src="img/genduo.png"> ' +
                    '      </div>\n' +
                    '                    </div>';
                //obj[key]當屬性值為漢字時 甜 辣 就是數組 當屬性值為英文字母時 就是字符串 需要再次切割
                if (obj[key].constructor == Array){//判斷屬性的屬性值是不是數組 如果屬性值有多個，就是數組就可以遍歷不會報錯，如果是一個就不是數組
                    $.each(obj[key],function (j,tbj) {
                        Ospan+='<span data-id="'+key+'">'+tbj+'</span>';
                    })
                }else if (obj[key].constructor == String){
                    $.each(obj[key].split(","),function (j,tbj) {
                        Ospan+='<span data-id="'+key+'">'+tbj+'</span>';
                    })
                } else {
                    Ospan+='<span data-id="'+key+'">'+obj[key]+'</span>';
                }
            }
            $("#gcipList").append(attrrow);
            $('#proper'+i).append(Ospan);
        });