Vue3 依據商品標籤給定不同的class

寫到這邊在想我要不要也來個30天挑戰!?

一般我們看到電商的網頁，除了大大的標題、價格以外，可能還會多一些小標籤。例如海外直送、免運費、新品上市等等，如果我們想將類型性質的標籤很偷懶的使用一個v-for就貼上去，但又想要給他們一些不同的css作區別，該怎麼實現呢？

使用框架：Vue3 Composition API

json檔案：item底下的tags:["優惠1","優惠2"]

<script>
const  getTagClass=(tag)=> {
      if (category === '優惠1') {
        return 'eventOne';
      } else if (category === '優惠2') {
        return 'eventTwo';
      } else if (category === '優惠3') {
        return 'eventThree';
      } else if (category === '優惠4') {
        return 'eventFour';
      } else {
        return ''; // 如果不匹配，則回傳空字串
      }
    }
 
};
</script>

<template>
  <div>
    <span
      v-for="tag in item.tags"
      :key="tag"
      :class="gettagsClass(tag)"
    >
      {{ tag}}
    </span>
  </div>
</template>

寫一下我踩雷的過程：

原來是打算用computed回傳一個class，後來發現需要有input的值才能判斷進行回傳，因此又改成function的形式。

<template>
  <div>
//原本的寫法
    <span
      v-for="tag in item.tags"
      :key="tag"
      :class="gettagsClass(item.tag)"
    >
      {{ tag}}
    </span>
  </div>
</template>

const categoryClasses = (tags) => {
  const classes = [];
  for (const tag of tags ) {
    if (tag=== '優惠1') {
      classes.push('eventOne');
    } else if (tag=== '優惠2') {
      classes.push('eventTwo');
    } else if (tag=== '優惠3') {
      classes.push('eventThree');
    } else if (tag=== '優惠4') {
      classes.push('eventFour');
    }
  }
  return classes;
};

但不管return的是字串或是array,在使用條件式的情況下，會一直添加class。如果用return或是break，那只要第一個tag情況滿足後來的就不會執行。

例如tags:["優惠1","優惠2"]

• 最後才return的情形

<span class="eventOne eventTwo">

• 滿足條件就return的情形

<span class="eventOne">

之後發現function裡面放的應該是單一元素而不是item.tag，同時在滿足一個情況底下就可以return

後來改來改去的終於懂了，覺得不記錄起來有點可惜。