最近在写后台框架的时候,遇到了这一类的需求,在此记录一下,具体的使用流程。
打波广告,我最近在写的后台框架: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>