这里整理一下思路,首先布局一下图片,其次去写按钮的样式,并把获取到的价格以及名称放在图片又边的位置 最后计算购买数量以及限购条件
这里主要说一下按钮部分怎么去写,效果大概如下
首先需要准备一个数组里面包含俩对象
selects代表一个数组里面包含selectdd用来判断颜色,list列表中放两个按钮名称
selects: [
{
title: "颜色",
selected: 0,
list: [
{
name: "黄色",
},
{
name: "黑色",
},
],
},
{
title: "套餐",
selected: 0,
list: [
{
name: "标配",
},
{
name: "套餐1",
},
],
},
],
以下是两种写法
第一种:不用组件的写法,这种比较简单
<div v-for="(item, index) in selects" :key="index">
<p>{
{ item.title }}</p>
<!-- 12/27 -->
<van-button
v-for="(i, ind) in item.list"
:key="ind"
@click="vanBtn(ind,index)"
:class="item.selected === ind?'active':''"
size="mini"
type="info"
plain
>{
{ i.name }}</van-button
>
</div>
js部分