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 :>{{sult}}</td>
三目条件运算符?:的含义
</template>
export default{
  data(){
    return{
      //提前准备listcolor对象数组，规定渲染不同数据作为key值来选取不同的对象（样式）   
resultColor:{"W":"#ff5252","L":"#2a2a2a","D":"#4ce029"},
    }
  }
}

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。