前端如何展示商品属性：SKU多维属性状态判断算法的应用-Vue 实现

由于公司开发了一个电商项目，涉及到前台商品属性的展示，所以百度上找了一下！找到了周琪力写的一个算法例子,因为作者只有jQuery 实现demo, 自己仿照 demo 实现了一个 vue 的！

周琪力原文: http://mp.weixin.qq.com/s?__biz=MzIwNjQwMzUwMQ==&mid=2247484853&idx=1&sn=bed59c1d83c3aeb4bf7881be8dbdd917&chksm=97236777a054ee61fc3cef07eb4b164fa28e26917ce0a409d876964ad3c2ee3f90a000e29beb#rd

原文的demo实现：http://codepen.io/keelii/pen/RoOzgb

效果图：

附上代码：

<!DOCTYPE html>
<html lang="en"> <head> <meta charset="UTF-8"> <title>Vue 实现商品属性的计算显示</title> <style> body { font-size: 12px; } dt { width: 100px; text-align: right; } dl { clear: both; overflow:hidden; } dl.hl { background:#ddd; } dt, dd { float:left; height: 40px; line-height: 40px; margin-left: 10px; } button { font-size: 14px; font-weight: bold; width: 100px; height: 30px; margin: 0 10px; } .disabled { color:#999; border: 1px dashed #666; } .active { color: red; } .top-but { margin: 10px; } #skuId { height: 24px; font-size: 14px; line-height: 24px; } </style> </head> <body> <textarea id="values" style="width:600px;height:100px"> [ { "颜色": "红", "尺码": "大", "型号": "A", "skuId": "3158055" }, { "颜色": "白", "尺码": "大", "型号": "A", "skuId": "3158054" }, { "颜色": "白", "尺码": "中", "型号": "B", "skuId": "3133859" }, { "颜色": "蓝", "尺码": "小", "型号": "C", "skuId": "3516833" } ] </textarea> <div id="app"> <label> 默认选中 : <input type="text" name="skuId" id="skuId" v-bind:value="skuId"> </label> <button @click="getTextareaData" class="top-but"> 重新加载数据 </button> 当前属性ID：{{ skuId }} <dl v-for="item, key in list.result" class="content" v-bind:class="{hl: highKeys[key]}"> <dt> {{key}} : </dt> <dd> <button class="item" v-for="value in item" @click="handleActive(key, value)" v-bind:class="{active: value.active, disabled: !value.active && value.disabled}" > {{ value.name }} </button> </dd> </dl> 已经选择：{{ message }} </div> </body> <script src="https://unpkg.com/vue "></script> <script> let vue = new Vue({ el: "#app", data(){ return { data: [], skuId: "", skuName: "skuId", // 属性名称信息 keys: [], // 数据集合{list.result list.items} list: {}, // 分隔符 spliter: '\u2299', result: {}, message: "", highKeys: {}, }; }, methods: { powerset(arr) { let ps = [[]]; for (

转载于:https://www.cnblogs.com/xiaocaiyuxiaoniao/p/9790764.html

前端如何展示商品属性：SKU多维属性状态判断算法的应用-Vue 实现相关推荐

sku展示php,前端如何展示商品属性：SKU多维属性状态判断算法的应用
作者 | 周琪力编辑 | 尾尾本文为前端之巅周琪力原创,未经作者许可禁止转载. 问题描述这个问题来源于选择商品属性的场景.比如我们买衣服.鞋子这类物件,一般都需要我们选择合适的颜色.尺码等属性 ...
【DBMS 数据库管理系统】OLAP 核心技术 : 多维数据模型 ( 多维数据模型 | 维 | 维成员 | 维层 | 维层次 | 维属性 | 度量 )
文章目录一.OLAP 核心技术二.OLAP 多维数据模型三.OLAP 多维数据模型核心概念四.维五.维成员六.维层七.维层次八.维属性九.度量一.OLAP 核心技术 OLAP 核 ...
Android 选择商品属性sku
Android 选择商品属性sku 最近项目中使用SKU属性查询,类似淘宝京东商品的选择,在网上查询了弄了几个源码看看,发现还是实现不了多属性选择问题,再原基础上改动相当费事,所以想干脆自己处理这个问 ...
在vue项目前端如何实现展示动态小程序二维码
在vue项目前端如何实现展示动态小程序二维码 (就是根据所对应的商家数据展示一个动态的二维码) 首先,主要的工作还是后端和小程序前端的工作,我们vue项目的前端主要是根据他们给出的url一级所对应的参 ...
Java实现一行代码生成二维码，可传输到前端展示，可自定义二维码样式，可设置图片格式，可对二维码添加图片，可对二维码添加文字，可以设置二维码大小、字体大小、字体颜色、边框颜色、边框大小等等
Java实现一行代码生成二维码,可传输到前端展示,可自定义二维码样式,可设置图片格式,可对二维码添加图片,可对二维码添加文字,可以设置二维码大小.字体大小.字体颜色.边框颜色.边框大小等等. 0.准备 ...
商品SPU SKU 属性分类设计
SPU和SKU概念 SPU = Standard Product Unit (标准化产品单元) SPU是商品信息聚合的最小单位,是一组可复用.易检索的标准化信息的集合,该集合描述了一个产品的特性.通 ...
商品模块的整理_sku属性_ElaticSearch查询
思路:需求分析–表设计–后台基本代码生成(根据数据库表进行生成基本的CRUD)–Swagger或postman测试–前台功能展示所有的设计都是结合业务进行设计的商品的属性商品的属性包括:sku属 ...
商品规格sku算法应用
近期在做商城商品规格这个模块,规格联动这边看似简单,实则坑(学问)深着呢.只怪自己轻视了它,未经思考便上手,于是越写越棘手,越绕越晕... 两天后,成功地把自己套牢,写不下去了. 上网寻找,看了淘宝S ...
【第七篇】商城系统-商品发布-SKU和SPU管理
商品服务 1.新增商品 1.1 品牌的关联 1.1.1 PubSub依赖缺失打开新增商品页面的时候会出现的错误提示: 原因是缺少:PubSub相关依赖解决办法使用npm添加依赖:npm inst ...

前端如何展示商品属性：SKU多维属性状态判断算法的应用-Vue 实现

前端如何展示商品属性：SKU多维属性状态判断算法的应用-Vue 实现相关推荐

最新文章

热门文章