Loop of different data in vue, the array object in it

Description with product attribute data

The display effect in the page is: to display the product attributes on the page, the product attributes are the attributes of the product uploaded independently in the background. The product attributes are different, so the attributes and attribute values need to be displayed on the page

 

 

 

Product attribute data is:

properties: "[

                    {"surface treatment":["Blackening","Become pale"]},

                    {"colour":["Red","yellow"]},

                    {"Size":["10mm","20mm"]}

              ]"

The html code is:

<div class="row" v-for="(val, name, index) in properties" :key="index">  <!--Cycle outer data-->
<div v-for="(pro,key,index) in val" :key="index"> <!--display key,attribute-->
<div class="left">
<p>{{key}}</p>
</div>
<div class="center showHeight">
<p class="spec filterorder shuxing" id="proper0">
<span data-id="0" class="active">whole</span>
<span data-id="" v-for="(val,i) in pro">{{val}}</span> <!--Attribute has more than one,Loop multiple attributes to the page-->
</p>
</div>
<div class="right" onclick="attrmore(this)">
<img src="img/genduo.png" style="display: none;">
</div>
</div>
</div>


1. Focus on recording the display of key and value similar to jquery
Here's how vue is written
val:{"surface treatment":["Blackening","Become pale"]}
 <div v-for="(pro,key,index) in val" :key="index">   <!--display key,attribute-->
<div class="left">
<p>{{key}}</p>
       <p>{{por}}</p>
        </div>
</div>

2 the following example is jQuery
//Loading attribute
    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">whole</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] when the attribute value is Chinese character, sweet and spicy is array. When the attribute value is English letter, the string needs to be cut again
                if (obj[key].constructor == Array){//Determine whether the attribute value of an attribute is an array. If there are multiple attribute values, the array can be traversed without error. If it is an array, it is not an 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);
        });

Tags: Javascript Attribute Vue JQuery JSON

Posted on Tue, 07 Jan 2020 08:05:11 -0800 by sd9sd