vue 不同内容 不同颜色

效果:

代码:

<template>
    <div>
        <h1>temp1</h1>
        <div>
            <ul >
                <dir v-for="item in tss" :key="item">
                    <li>{{ item.title }}</li>
                    <li :style="activation(item.content)">{{ item.content }}</li>
                </dir>
            </ul>
        </div>
    </div>
</template>

<script>
    export default {
        data() {
            return {
                tss: [
                    {'title': 'jj','content': 'err'},
                    {'title': 'jon','content': 'ok'},
                    {'title': 'jay','content': 'wining'},
                    {'title': 'james','content': 'mvp'}
                ]
            }
        },
        computed: {
            activation() {              
                return (icontent) => { // 使用JavaScript闭包，进行传值操作
                    console.log(icontent)
                    
                    if (icontent === "err"){
                        return {'color':'red'}
                    } 
                    else if (icontent === "ok"){
                        return {'color':'blue'}
                    } 
                    else if (icontent === "wining"){
                        return {'color':'yellow'}
                    }
                        
                }
            }
        }
    }
</script>

<style>
</style>