欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

vue里不同数据的循环,其中的数组对象

程序员文章站 2022-06-15 11:58:11
用产品的属性数据说明 页面里显示效果为:要把产品的属性显示到页面上,产品属性为后台自主上传产品的属性,产品的属性不同,所以需要把属性和属性值显示到页面上 产品属性数据为: properties: "[ {"表面处理":["发黑","发白"]}, {"颜色":["红色","黄色"]}, {"大小":[ ......

用产品的属性数据说明

页面里显示效果为:要把产品的属性显示到页面上,产品属性为后台自主上传产品的属性,产品的属性不同,所以需要把属性和属性值显示到页面上

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);
        });