前端 class 和 style 小技巧

前端 class 和 style 动态用法 根据条件判断添加样式

根据需求条件判断添加class样式 {class名称: 要判断的条件}

如果有多个class要添加或者是多个条件后面追加对象就好了

:class="{ 'active--tab': activeLeftTab === item.id }"


<style>
    .active--tab {
      color: #fff;
      font-weight: 700;
      padding: 0 10px;
      transition: all 0.6s;
    }
</style>

style 样式也是多样化

// 第一种情况  来自父组件传过来的样式
:style="{ width: width, height: height }"

  props: {
    width: {
      type: String,
      default: "50%",
    },
    height: {
      type: String,
      default: "500px",
    },
  },
  // 第二种情况 三元表达式 方法写入 
   :style="brokenAtomsTags.length > 1 ? 'height: 140px' : 'height: 82px'"
  // 第三种根据一个参数, 来控制一个属性是什么颜色...
       :style="{color: item.reaction_type === 2 ? '#c71585' : '#8a2be2',}"

动态拼接数据时

:名称="`${id}`"