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

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

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

<div class="meal">
            <el-card
              class="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' // 其他卡片按钮为默认蓝色
}