js 三级运算表达式运用

最新推荐文章于 2024-01-16 17:49:55 发布

城南花已开Ya

最新推荐文章于 2024-01-16 17:49:55 发布

阅读量451

点赞数 2

本文链接：https://blog.youkuaiyun.com/qq_42174597/article/details/121010170

版权

vue 知识同时被 2 个专栏收录

23 篇文章

订阅专栏

css

2 篇文章

订阅专栏

1.动态样式里三级表达式的写法

  <li v-for="(item, index) in listData" :key="index">
          <div class="ww">
          
            <div class="ee">
            //不同字段表示不同颜色
              <p class="title2" v-text="item.riskgrade" v-bind:class=" 
               ['title2',item.riskgrade=='重大'?'icon':(item.riskgrade=='较大'?'icon1': 
                (item.riskgrade=='一般'?'icon2':'icon3'))]"></p>
            </div>
          </div>
</li>

<style>
  .title2 {
    color: red;
  }
  .icon{
     color: red;
  }
  .icon1{
     color: #FF6704;
  }
  .icon2{
     color: #FFCA70;
  }
  .icon3{
     color: #008637;
  }


</style>