for循环—不同div显示不同样式

for出来的div想要显示不同的样式，可以通过动态class，根据需要的条件指示控制样式，例如用index

第一个div显示first-card的样式，第二个div显示second-card的样式

<div class="meal"><el-cardclass="meal_details"v-for="(item, index) in mealList":key="item.id":class="{ 'first-card': index === 0, 'second-card': index === 1 }"><template #header>{{ item.description }}</template><div></div><span class="price">￥{{ item.price }} 元</span><template #footer><el-button :type="getButtonType(index)" @click="handleAmount(item)">立即购买</el-button></template></el-card></div>.first-card {border: 1px solid #f56c6c;
}.second-card {border: 1px solid #eebe77;
}

const getButtonType = (index) => {if (index === 0) return 'danger' // 第一个卡片按钮为红色if (index === 1) return 'warning' // 第二个卡片按钮为绿色return 'primary' // 其他卡片按钮为默认蓝色
}