vue实现选择商品规格功能
作者：carrie~苗
这篇文章主要为大家详细介绍了vue实现选择商品规格功能，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
本文实例为大家分享了vue实现选择商品规格功能的具体代码，供大家参考，具体内容如下
要实现上图的效果，代码如下：
<template>
<div class="popupSub">已选规格：{{showSelectSpec}}</div>
<div class="subItem" v-for="(item,index) in subItemList" :key="index">
<div class="itemTitle">{{item.itemTitle}}</div>
<div class="itemContent">
<ul>
<li
v-for="(res,resIndex) in item.itemContent"
:key="res"
@click="selectItem(res,index,$event,resIndex)"
:class="subIndex[index] == resIndex?'selectActive':'itemLi'"
>{{res}}</li>
</ul>
</div>
</div>
</template>
<script>
export default {
data() {
return {
showSelectSpec: "",
subItemList: [
{
itemTitle: "味道",
itemContent: ["原味", "猕猴桃味", "橙子味", "苹果味", "菠萝味"]
},
{
itemTitle: "容量",
itemContent: ["300ML", "400ML", "500ML", "1000ML"]
}
],
selectArr: [], // 存放被选中的值
subIndex: [] // 是否选中 因为不确定是多规格还是但规格，所以这里定义数组来判断
}
},
methods: {
selectSpec(index) {
let t = this;
t.showSpec = true;
},
selectItem(res, index, enevt, resIndex) {
let t = this;
if (t.selectArr[index] !== res) {
t.selectArr[index] = res;
t.subIndex[index] = resIndex;
} else {
t.selectArr[index] = "";
t.subIndex[index] = -1; // 去掉选中的颜色
}
t.checkItem();
},
checkItem: function() {
var self = this;
var option = self.subItemList;
var result = []; // 定义数组存储被选中的值
console.log(JSON.parse(JSON.stringify(self.selectArr)));
for (let i in option) {
result[i] = self.selectArr[i] ? self.selectArr[i] : "";
}
for (let i in option) {
var last = result[i]; // 把选中的值存放到字符串last去
for (let k in option[i].item) {
result[i] = option[i].item[k].name; // 赋值，存在直接覆盖，不存在往里面添加name值
console.log("这里:", JSON.parse(JSON.stringify(result)));
}
result[i] = last; // 还原，目的是记录点下去那个值，避免下一次执行循环时避免被覆盖
}
self.$forceUpdate(); // 重绘
self.showSelectSpec = self.selectArr.join("、");
console.log(self.showSelectSpec);
}
}
}
</script>
<style>
.popupSub {
color: #aaaaaa;
text-align: center;
font-size: 0.8em;
margin-top: 5px;
letter-spacing: 2px;
}
.subItem {
font-size: 0.8em;
margin-top: 10px;
}
.itemContent ul,
li {
display: flex;
flex-wrap: wrap;
}
.itemContent ul li {
padding: 0 10px;
border-radius: 10px;
margin-right: 10px;
margin-top: 10px;
height: 28px;
line-height: 28px;
}
.itemLi {
border: 1px solid #b3b3b3;
}
.selectActive {
border: 1px solid #1697db;
color: #1697db;
}
</style>这只是简单的实现选择规格，如果一开始后台有返回数据，还需要定义一个接收数据的对象。
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。