vue.js的自定义过滤器如何给文字加颜色

Question

怎样通过filter给文本增加颜色啊

要做成这种效果的，搞了一早上没做出来-.-### 问题描述

问题出现的环境背景及自己尝试过哪些方法

相关代码

粘贴代码文本（请勿用截图）

<Row :gutter="5" v-for="(item,index) in list1" class='itemRow' :key="index">
                <i-col span="2">
                    <p class="itemTitle">{{ item | filterA }}</p>
                </i-col>
            </Row>

 filters:{
            filterA(item){
                if(item.title === '系统事件'){
                    return '样式1'
                }else if(item.title === '报警'){
                    return '样式2'
                }else if(item.title === '操作记录'){
                    return '样式3'
                }
            }
        },

你期待的结果是什么？实际看到的错误信息又是什么？

期待大神给出方法

Answer 1

先定义多个calss样式吧。
比如color1 color2 color3
之后把过滤器用到class属性上

<Row :gutter="5" v-for="(item,index) in list1" class='itemRow' :key="index">
    <i-col span="2">
        <p :class="item | filterA">{{ item.title }}</p>
    </i-col>
</Row>

 filters:{
    filterA(item){
        if(item.title === '系统事件'){
            return 'color1 itemTitle'
        }else if(item.title === '报警'){
            return 'color2 itemTitle'
        }else if(item.title === '操作记录'){
            return 'color3 itemTitle'
        }
    }
}

Answer 2

<p :class="{matchClass(item)}">{{ item }}</p>


//
methods:{
    matchClass(title){
        switch(title){
            case "hey":
                return "xxxx"
        }
    }
}