微信小程序作用_vue完成商城上货组件简易版

  • 栏目:行业动态 时间:2021-01-11 11:34 分享新闻到:
<返回列表

vue实现商城上货组件简易版       这篇文章主要为大家详细介绍了vue实现商城上货组件简易版,50行js代码实现效果,具有一定的参考价值,感兴趣的小伙伴们可以参考一下

本文实例为大家分享了vue实现商城上货组件的具体代码,供大家参考,具体内容如下

0、结果放前面

点击

带脚手架的

加个Star后,fork下来。

然后在控制台,先输入npm install安装依赖,再输入npm run dev运行查看效果

1、先列需求

一切开发都是基于需求做的,所以需求先行,根据需求设计功能。

需求如下:

上货商品有多个属性类别;(例如:颜色、尺寸、型号) 每个类别有多个子属性;(例如:白色、绿色、金色) 每个商品必然具备每个类别的其中一个子属性; 除此之外还有额外属性,如【库存】、【描述】、【价格】等,每个都有; 要求属性类别可以无限添加; 要求每个属性类别下面的子属性可以无限添加; 最后输出所有组合,以及他们每个组合的额外属性;

例如:

颜色(白色,金色),尺寸(41,42); 那么一共有四种组合:(白色,41),(白色,42),(金色,41),(金色,42); 然后给每个组合加上价格、数量等属性,最后用JSON格式输出;

由于无限可扩展的特性,因此模块分拆为两部分:

负责支持无限添加功能(包括类别和类别的属性);
根据已添加的类别和属性,组合出列表,并将列表展示或输出;

3、代码如下

由于功能类似,因此没有写删除、修改功能,但思路跟添加是一致的。

点击

带脚手架的

加个Star后,fork下来。

然后在控制台,先输入npm install安装依赖,再输入npm run dev运行查看效果

详细请参考注释:

* Created by 王冬 on 2017/11/14.
* QQ: 
* weChat: qq
 template 
 div 
 button @click='getList' 输出结果 /button 
 div 
 输入分类名,然后点击【确认】按钮添加新的分类
 input type='text' v-model='category' 
 button @click='addCategory' 确认 /button 
 /div 
 template v-for='i in categoryList' 
 div 
 p 类别:{{i.name}} /p 
 div 属性:
 p 新增属性名: input type='text' v-model='i.newPropertyName' 
 button @click='addToPropertyList(i)' 点击添加 /button 
 div 
 template v-for='pro in i.propertyList' 
 div {{pro}} /div 
 /template 
 div /div 
 /div 
 /div 
 /div 
 /template 
 p 以下是展示列表 /p 
 div 
 table 
 td v-for='i in categoryList' 
 {{i.name}}
 /td 
 td 价格 /td 
 td 数量 /td 
 /tr 
 tr v-for='(val,key) in showList' 
 td v-for='i in categoryList' 
 {{val[i.name]}}
 /td 
 input type='text' v-model="val['price']" 
 /td 
 input type='text' v-model="val['count']" 
 /td 
 /tr 
 /table 
 /div 
 /div 
 /template 
 style scoped 
 .category {
 border: 1px solid #333;
 .property {
 float: left;
 border: 1px solid #333;
 display: inline-block;
 table {
 border-colla凡科抠图e: colla凡科抠图e;
 th, td {
 border: 1px solid #000;
 /*--清除浮动--*/
 .clearfloat {
 width: 0;
 clear: both;
 overflow: hidden;
 visibility: hidden;
 /style 
 script 
 export default {
 data () {
 return {
 // 要添加的新类别的名字
 category: '',
 // 类别列表
 categoryList: [
 // 类别名
 name: '颜色',
 // 类别属性列表
 propertyList: ['白色', '绿色']
 name: '尺寸',
 propertyList: ['10', '20']
 name: '类型',
 propertyList: ['衣服', '裤子']
 computed: {
 // 输出列表
 showList () {
 let arr = []
 this.toGet(arr, {}, 0, this.categoryList.length)
 return arr
 methods: {
 // 添加一个新的类别
 addCategory () {
 // 创建新类别
 let obj = {
 name: this.category,
 propertyList: [],
 newPropertyName: ''
 // 添加到类别列表中
 this.categoryList.push(obj)
 this.category = ''
 // 向类别添加属性
 addToPropertyList (category) {
 // 在该类别的属性里列表里添加新的属性
 category.propertyList.push(category.newPropertyName)
 category.newPropertyName = ''
 // 递归
 getList () {
 console.log(this.showList)
 return this.showList
 // 将数据组合成列表,利用递归的特性
 toGet (arr, obj, currentIndex, maxLength) {
 if (currentIndex = maxLength) {
 return
 this.categoryList[currentIndex].propertyList.forEach(item = {
 // 在组合到最后一个之前,不停的往模板对象上添加属性
 obj[this.categoryList[currentIndex].name] = item
 if (currentIndex === maxLength - 1) {
 // 组合到最后一个后,创建一个新的对象,然后放置入列表中
 let result = Object.assign({}, obj)
 result.price = '0'
 result.count = '1'
 arr.push(result)
 } else {
 this.toGet(arr, obj, currentIndex + 1, maxLength)
 /script 

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持凡科。

分享新闻到:

更多阅读

微信小程序作用_vue完成商城上货组件简易

行业动态 2021-01-11
vue完成商城系统上货部件简单版 本文关键为大伙儿详尽详细介绍了vue完成商城系统上货...
查看全文

广州凡科互联网科技股份有限公司招聘阿

行业动态 2021-01-11
招聘人数:6职位信息【岗位职责】:1.负责公司阿里巴巴网销宝(产品推广服务)产品的管理...
查看全文

html网页设计代码作业-新站SEO

行业动态 2021-01-10
东晟SEO提升咨询顾问:SEOOK > 百度搜索提升 > 企业网站建设企业网站建设新网站SEOSEOOK【企业网...
查看全文
返回全部新闻


区域站点: 南丰县自建免费网站   南宫市凡科网建站   囊谦县网站建设平台有哪些   南和县凡客建站   南华县自建免费网站   南江县凡科网建站   南京市网站建设平台有哪些   南靖县凡客建站   南康市自建免费网站   南乐县凡科网建站   南陵县网站建设平台有哪些   南宁市凡客建站   南平市自建免费网站   南皮县凡科网建站   南市区网站建设平台有哪些   南通市凡客建站   南投县自建免费网站   南雄市凡科网建站   南溪县网站建设平台有哪些   南阳市凡客建站   南漳县自建免费网站   南召县凡科网建站   南郑县网站建设平台有哪些   那坡县凡客建站   那曲县自建免费网站   纳雍县凡科网建站   讷河市网站建设平台有哪些   内黄县凡客建站   内江市自建免费网站   内丘县凡科网建站   内乡县网站建设平台有哪些   嫩江市凡客建站   聂荣县自建免费网站   尼玛县凡科网建站   尼木县网站建设平台有哪些   宁安市凡客建站   宁波市自建免费网站   宁城县凡科网建站   宁德市网站建设平台有哪些   宁都县凡客建站   宁国市自建免费网站   宁海县凡科网建站   宁化县网站建设平台有哪些   宁晋县凡客建站   宁陵县自建免费网站   宁明县凡科网建站   宁南县网站建设平台有哪些   宁强县凡客建站   宁陕县自建免费网站   宁武县凡科网建站   宁乡市网站建设平台有哪些   宁阳县凡客建站   宁远县自建免费网站   农安县凡科网建站   磐安县网站建设平台有哪些   盘锦市凡客建站   盘山县自建免费网站   磐石市凡科网建站   盘州市网站建设平台有哪些   蓬安县凡客建站   澎湖县自建免费网站   蓬莱市凡科网建站   彭山县网站建设平台有哪些   蓬溪县凡客建站   彭阳县自建免费网站   彭泽县凡科网建站   彭州市网站建设平台有哪些   偏关县凡客建站   平安县自建免费网站   平昌县凡科网建站   平定县网站建设平台有哪些   屏东县凡客建站   平度市自建免费网站   平果县凡科网建站   平和县网站建设平台有哪些   平湖市凡客建站   平江县自建免费网站   平乐县凡科网建站   平凉市网站建设平台有哪些   平利县凡客建站   平罗县自建免费网站   平陆县凡科网建站   屏南县网站建设平台有哪些   平泉市凡客建站   屏山县自建免费网站   平顺县凡科网建站   平塘县网站建设平台有哪些   平潭县凡客建站   平武县自建免费网站   萍乡市凡科网建站   平乡县网站建设平台有哪些   平阳县凡客建站   平遥县自建免费网站   平阴县凡科网建站   平邑县网站建设平台有哪些   平远县凡客建站   平舆县自建免费网站   皮山县凡科网建站   普安县网站建设平台有哪些   浦北县凡客建站   浦城县自建免费网站   普洱市凡科网建站   普格县网站建设平台有哪些   浦江县凡客建站   普兰县自建免费网站   普宁市凡科网建站   莆田市网站建设平台有哪些   迁安市凡客建站   乾安县自建免费网站   潜江市凡科网建站   潜山市网站建设平台有哪些  

友情链接: 自助建网站 小程序建站 企业建站 凡科建站登录 手机版

Copyright © 2002-2020 网站建设平台有哪些_凡客建站_自建免费网站_凡科网建站_怎么建设自己网站 版权所有 (网站地图) 备案号:粤ICP备10235580号