基于vue实现商品规格sku,vue商品列表
这篇文章主要为大家详细介绍了某视频剪辑软件实现选择商品规格功能，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
本文实例为大家分享了某视频剪辑软件实现选择商品规格功能的具体代码，供大家参考，具体内容如下
要实现上图的效果，代码如下：
模板
div class=popupSub 已选规格：{{showSelectSpec}}/div
div class=subItem v-for=(item，index)in subItem list :key= index
div class= item title“{ item。项目标题} }/div
div class=itemContent
保险商实验所
里
项目.项目内容中的v-for=(res，resIndex
:key=res
@click=selectItem(res，index，$event，resIndex)
:class= subIndex[index]==resin index？选择活动: itemLi
{{res}}/li
/ul
/div
/div
/模板
脚本
导出默认值{
data() {
返回{
showSelectSpec: ，
子项列表：[
{
项目标题： 味道，
项目内容：[原味, 猕猴桃味, 橙子味, 苹果味, 菠萝味]
},
{
项目标题： 容量，
项目内容：[ 300毫升, 400毫升, 500毫升, 1000毫升]
}
],
selectArr: []，//存放被选中的值
子索引：[] //是否选中因为不确定是多规格还是但规格，所以这里定义数组来判断
}
},
方法：{
选择规格(索引){
设t=这个
t.showSpec=true
},
选择项目(res，index，enevt，resin index){
设t=这个
if (t.selectArr[index]！==res) {
t。selectar[index]=RES；
t。subindex[index]=树脂指数；
}否则{
t。selectar[index]=“”；
t。subindex[index]=-1；//去掉选中的颜色
}
t。检查项目()；
},
checkItem: function() {
var self=this
var option=self.subItemList
定义变量结果=[];//定义数组存储被选中的值
控制台。log(JSON。解析(JSON。stringify(自我。select arr))))；
对于（让我选择){
结果selectArr[i]？自我。selectarr[I]:" "；
}
对于（让我选择){
var last=result[I]；//把选中的值存放到字符串最后的去
对于(让k在选项[我]中。项目){
结果[我]=选项[我].项目[k]的缩写.姓名；//赋值，存在直接覆盖，不存在往里面添加名字值
console.log(这里：，JSON。解析(JSON。stringify(结果))；
}
结果[我]=最后；//还原，目的是记录点下去那个值，避免下一次执行循环时避免被覆盖
}
自我. force update()；//重绘
自我。showselectspec=self。选择箭头。加入(、)；
控制台。日志(自我。showselectspec)；
}
}
}
/脚本
风格。popupSub {
颜色：# aaaaaa
文本对齐：居中；
字体大小：0.8微米；
边距-顶部：5px
字母间距：2px
}。子项{
字体大小：0.8微米；
页边距-顶部：10px
}。项目内容ul，
李{
显示器：flex
柔性包装：缠绕；
}。项目内容ul li {
填充：0 10px
边框半径：10px
右边距：10px
页边距-顶部：10px
高度：28px
行高：28px
}。itemLi {
边框：1px实心# b3b3b3
}。选择活动{
边框：1px固体# 1697db
颜色：# 1697db
}
/风格
这只是简单的实现选择规格，如果一开始后台有返回数据，还需要定义一个接收数据的对象。
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。