vue通过data数据判断添加class

最新推荐文章于 2024-02-19 21:55:14 发布

原创最新推荐文章于 2024-02-19 21:55:14 发布 · 5.2k 阅读

1 ·

CC 4.0 BY-SA版权

本文介绍了一种根据数组元素的属性动态改变字体颜色的方法。通过在Vue.js中使用v-for循环结合三元运算符，实现了不同class类型对应不同颜色的显示效果。具体地，当class类型为3时字体显示为粉色，当class类型为4时字体显示为绿色，其余情况下字体颜色为默认色。

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

在这里插入图片描述
现在要通过data里面的数组来判断什么时候，字体显示什么颜色

<template>
<div v-for="ml in monlist">
<div :class="[ml.classtype==3?'pink':'nol',ml.classtype==4?'green':'nol']"></div>
</div>
</template>

<script>
export default {
data(){
    return{
       monlist:[
        	  {classtype:1},
        	  {classtype:2},
        	  {classtype:3},
        	  {classtype:4}
        	]
        }
    }
}
</script>

<style>
.nol{color: #333333;}
.pink{color: #ED4287;}
.green{color: #0DC190;}
</style>

要是各位有更好的办法，欢迎留言！