vue商品详情页sku规格信息的展⽰
商品的规格由后端传递到前端，它⼀般是⼀个json字符串，形如：{"⼝味":"原味","包装":"⼿袋单⼈份"}
但是显⽰的时候，要分开显⽰
这⾥的 ⼝味（也就是 sku 的key） 是⼀个 li 标签，后⾯⼝味的种类（也就是 sku 的 value）也是 li 标签，⽽ key 和 value ⽤的是 ul 标签包裹，所以代码⼤致的框架如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="./js/vue.global.js"></script>
</head>
<body>
<div id="app">
<ul v-for="skuKey in skuKeys">
<li>{{skuKey}}</li>
<template v-for="vv in skuObj[skuKey]">
<li v-if="vv != null">{{vv}}</li>
</template>
</ul>
<p>{{skuObj}}</p>
</div>
</body>
<script>
const App = {
js获取json的key和valuedata() {
return {
skus: [
{
id: "1001",
sku: '{"⼝味":"原味","包装":"⼿袋单⼈份"}'
},
{
id: "1002",
sku: '{"⼝味":"奶油","包装":"离合双⼈份","材质":"黄⾦"}'
},
{
id: "1002",
sku: '{"⼝味":"炭烧","包装":"全家福礼包"}'
},
{
id: "1002",
sku: '{"⼝味":"咸⾹","包装":"全家福礼包"}'
}
],
skuKeys: []
}
},
methods: {
handleSku(){
this.skus.forEach(item => {
const obj = JSON.parse(item.sku);
for (let key in obj) {
if (this.skuKeys.indexOf(key)  == -1){
this.skuKeys.push(key);
this.skuKeys.push(key);
}
}
});
}
},
computed: {
skuObj(){
let skuObj = {};
this.skuKeys.forEach(item => {
skuObj[item] = [];
})
this.skus.forEach(item => {
const obj = JSON.parse(item.sku);  // 获取sku并转为对象                    this.skuKeys.forEach(item => {
if (skuObj[item].indexOf(obj[item]) == -1){
skuObj[item].push(obj[item]);
}
})
});
return skuObj;
}
},
created(){
this.handleSku();
}
}
</script>
</html>
效果如下：