vue根据不同文字显示不同颜色

落辰123

已于 2023-03-08 19:36:28 修改

阅读量2.7k

点赞数

文章标签： vue.js javascript 前端

于 2023-03-07 12:03:15 首次发布

原文链接：https://blog.youkuaiyun.com/tuoersuo/article/details/109116848

版权

该代码示例展示了如何在Vue.js中使用模板语法进行数据绑定，遍历列表并根据内容应用不同颜色。`activation`计算属性用于根据内容值动态改变列表项的颜色。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<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>