vue 随机显示数组的其中一个_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);

});

原文出处：https://www.cnblogs.com/PotatosMe/p/12162418.html