vue实现动态绑定class--（三目运算符）根据span数字内容改变其样式

时间：2019-12-29 14:55:51 阅读：972 评论：0 收藏：0 [点我收藏+]

一.根据span数字内容改变数字本身样式（两种样式）

　　//使用三目运算符，判断当span的val是否小于0给其不同的class名

　　<span class="inOut" :class="abc.upgold<0?‘inColor‘:‘outColor‘">得分：{{abc.upgold}}</span>

</template>

.inColor{

color: red!important

}

.outColor{

color: #34ea34!important

}

</style>

二.根据span数字内容改变数字所在span背景色（多种样式）

　　//将span的val放在listcolor数组中　

</template>

export default{

　　data(){

　　　　return{

　　　　　　//提前准备listcolor对象数组，规定渲染不同数据作为key值来选取不同的对象（样式）

　　　　　　listcolor:{"1":"rgb(221, 62, 62)", "2":"rgb(254, 62, 62)","":"gray","-1":"#4acc6c","-2":"#696969"},

　　　　}

原文地址：https://www.cnblogs.com/wd163/p/12114786.html

踩

(0)

评论一句话评论（0）

分享档案

更多>

周排行