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' // 其他卡片按鈕為預設藍色
}