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

用产品的属性数据说明

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

 

 

 

产品属性数据为:

properties: "[

                    {"表面处理":["发黑","发白"]},

                    {"颜色":["红色","黄色"]},

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

              ]"

html代码为:

  
    
   
        

            
{{key}}
        
        

            

                全部
                {{val}}  
            
        
        

            
        
    

1.重点记录一下类似于jquery中的key 与 value的显示
以下是vue的写法

val:{"表面处理":["发黑","发白"]}

 
   
        

            
{{key}}
   

　　　　　　　
{{por}}

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 = ' 
\n' +
            '            \n' +
            '        
';
        $("#gcipList").append(gcipTu);
        $.each(proper,function (i,obj) {
            var Ospan='全部';
            for (key in obj){
                attrrow='
\n' +
                    '                        
\n' +
                    '                            
'+key+'
\n' +
                    '                        
\n' +
                    '                        
\n' +
                    '                            
\n' +

                    '                            
\n' +
                    '                        
\n' +
                    '      
\n' +
                    '            ' +
                    '      
\n' +
                    '                    
';
                //obj[key]当属性值为汉字时 甜 辣 就是数组 当属性值为英文字母时 就是字符串 需要再次切割
                if (obj[key].constructor == Array){//判断属性的属性值是不是数组 如果属性值有多个，就是数组就可以遍历不会报错，如果是一个就不是数组
                    $.each(obj[key],function (j,tbj) {
                        Ospan+=''+tbj+'';
                    })
                }else if (obj[key].constructor == String){
                    $.each(obj[key].split(","),function (j,tbj) {
                        Ospan+=''+tbj+'';
                    })
                } else {
                    Ospan+=''+obj[key]+'';
                }
            }
            $("#gcipList").append(attrrow);
            $('#proper'+i).append(Ospan);
        });