使用v-for列表渲染出不同的效果

首先在这里描述一下问题，举一个简单的例子：我有一堆标签，现在需要渲染出来，那么一下子全部渲染出来的话数量太多，而且样式还是一样的，那么在一定的程度上就不美观，因此现在需要有规律的渲染出不同样式的标签，如下图所示。

看代码：

<div class="skill-intro">
          <div v-for="(item, index) in professionalSkills" :key="index">
            <t-tag
              :class="getClass(index)"
              shape="round"
              variant="light"
              :theme="getTheme(index)"
              style="margin: 5px 5px"
              >{{ item }}</t-tag
            >
          </div>
        </div>

const getClass = (index) => {
    if (index % 4 === 0) return 'first-tag'
  }

  const getTheme = (index) => {
    if (index % 4 === 0) return 'default'
    if (index % 4 === 1) return 'primary'
    if (index % 4 === 2) return 'success'
    if (index % 4 === 3) return 'warning'
  }

大概得实现思路就是这样，如果有什么好的方法，欢迎评论。