vue实现动态绑定class--（三目运算符）根据span数字内容改变其样式
Posted wd163
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了vue实现动态绑定class--（三目运算符）根据span数字内容改变其样式相关的知识，希望对你有一定的参考价值。
一.根据span数字内容改变数字本身样式（两种样式）
<template>
//使用三目运算符，判断当span的val是否小于0给其不同的class名
<span class="inOut" :class="abc.upgold<0?‘inColor‘:‘outColor‘">得分：{{abc.upgold}}</span>
</template>
<style scoped>
.inColor{
color: red!important
}
.outColor{
color: #34ea34!important
}
</style>
二.根据span数字内容改变数字所在span背景色（多种样式）
<template>
//将span的val放在listcolor数组中
<td :style="{background:listcolor[item.rq[0]]}">主<br/>{{item.rq[0]}}</td>
</template>
export default{
data(){
return{
//提前准备listcolor对象数组，规定渲染不同数据作为key值来选取不同的对象（样式）
listcolor:{"1":"rgb(221, 62, 62)", "2":"rgb(254, 62, 62)","":"gray","-1":"#4acc6c","-2":"#696969"},
}
}
}
以上是关于vue实现动态绑定class--（三目运算符）根据span数字内容改变其样式的主要内容，如果未能解决你的问题，请参考以下文章