vue中css样式高阶用法（一）:style和:class使用方法getStatus

前端小云儿

已于 2022-09-26 17:13:38 修改

阅读量483

点赞数

分类专栏： vue 文章标签：前端 html

于 2022-09-20 15:36:56 首次发布

本文链接：https://blog.csdn.net/jieweiwujie/article/details/126954465

版权

vue 专栏收录该内容

69 篇文章 1 订阅

订阅专栏

 <div class="l-div">
            <div
              class="dian"
              :style="{
                color: getStatus(2).color,
                backgroundColor: getStatus(item.type).color,
              }"
            ></div>
            <div
              class="type"
              :style="{
                color: getStatus(item.type).color,
              }"
            >
              {{ getStatus(item.type).text }}
            </div>
          </div>

getStatus(val) {
      let statusObj = {};
      if (val == 0) {
        statusObj.text = "解耦1";
        statusObj.color = "#F99C34";
      } else if (val == 1) {
        statusObj.text = "解耦2";
        statusObj.color = "#56D04C";
      } else if (val == 2) {
        statusObj.text = "解耦3";
        statusObj.color = "#666666";
      } else if (val == 3) {
        statusObj.text = "解耦4";
        statusObj.color = "#F25448";
      }
      return statusObj;
    },