vue商品详情页sku规格信息的展示

最新推荐文章于 2025-09-03 11:03:24 发布

原创最新推荐文章于 2025-09-03 11:03:24 发布 · 1.5k 阅读

4 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #前端 #javascript

vue 专栏收录该内容

1 篇文章

订阅专栏

这篇博客探讨了如何在Vue.js应用中处理后端传递的JSON字符串规格信息。通过解析JSON对象并将其转换为Vue的数据属性，然后使用`v-for`指令动态渲染商品的口味和包装等规格信息，实现UI的显示。示例代码展示了如何遍历和合并多个商品的规格，以确保所有可能的口味和包装选项都得到正确显示。

商品的规格由后端传递到前端，它一般是一个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 = {
        data() {
            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);
                        }

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

    Vue.createApp(App).mount('#app')
</script>
</html>

效果如下：
在这里插入图片描述