最近在写后台框架的时候，遇到了这一类的需求，在此记录一下，具体的使用流程。

打波广告，我最近在写的后台框架：http://www.github.com/cmdparkour/vue-admin-box

下面就以我这个需求来举个例子吧，来自于后端的数组数据，然后需要遍历几个关键的词，生成对应的值。

<template>
  <div class="item">
    <div class="tags">
      <div class="tag" v-for="(tag, key) in tags" :key="key" :style="{ 'background': colorInit(tag) }">{{ tag }}</div>
    </div>
  </div>
</template>
<script lang="ts">
import { defineComponent, computed } from 'vue'
export default defineComponent({
  setup() {
   let tags= []
   tags = ['新增', '优化', 'BUG']
    const colorInit = computed(() => {
      return (tag: string) => {
        const array = [
          { color: '#57c05d', tag: '新增' },
          { color: '#67a4dc', tag: '优化' }
        ]
        const obj = array.find(obj => {
          return obj.tag === tag
        })
        return obj && obj.tag ? obj.color : '#67a4dc'
      }
    })
    return {
      colorInit
    }
  }
})
</script>