vue中动态绑定class与style

绑定class

对象语法

传入一个对象，通过判断变量的布尔值绑定类名。也可以绑定一个返回对象的计算属性。

<div :class="{ active: isActive }">盒子</div>
<div :class="{ active: isActive, 'main-box': isMainBox }">盒子</div>
<div :class="dynamicClass">盒子</div>

data:{
	isActive: true,
  isMainBox: false,
  error: null
}  

computed: {
  dynamicClass: function () {
    return {
      active: this.isActive && !this.isMainBox,
      'text-danger': this.error && this.error.type === 'fatal'
    }
  }
}

数组语法

传入一个数组，数组元素是data声明的类名变量。

想根据条件切换列表中的 class，可以用三元表达式，但是如果出现多个判断会累赘，可以对象和数组结合使用。

<div v-bind:class="[activeClass, errorClass]"></div>

<div v-bind:class="[isActive ? activeClass : '', errorClass]"></div>
// 可简化为以下：
<div v-bind:class="[{ activeClass: isActive }, errorClass]"></div>

data: {
  isActive: true,
  activeClass: 'active',
  errorClass: 'text-danger'
}

业务中使用

<template>
  <div class="flex">
    <!-- 绑定一个类名，布尔值判断 -->
    <button :class="{ active: isActive }">text</button>
    
    <!-- 绑定多个类名，布尔值判断 -->
    <button
      :class="{ inactive: !isActive, pointer: isPointer, test: isTest == 1 }"
      >
      text
    </button>
    
    <!-- 绑定一个变量 -->
    <button :class="showActive">text3</button>
    
    <!-- 绑定多个变量 -->
    <button :class="[showActive, showBackground]">text</button>
    
    <!-- 绑定类名+布尔值判断 -->
    <button :class="['green', { pointer: isPointer }]">text</button>
    <div :class="{ 'f-16 c-info al-center': true, 'mb8': isShowFloorSet }"></div>
    
    <!-- 三目运算符 -->
    <button
      :class="[isActive ? 'orange' : 'green', isActive ? 'pointer' : 'bg-pink']"
      >
      text
    </button>
    
    <!-- 三目运算符+类名+布尔值判断 -->
    <button
      :class="[isActive ? 'pointer' : '', 'green', { 'bg-pink': isActive }]"
      >
      text
    </button>
  </div>
</template>
<script setup>
  import { reactive, toRefs } from "vue";

  const config = reactive({
    disabled: true,
    isActive: true,
    isPointer: true,
    showActive: "active",
    showBackground: "bg-pink",
  });

  let { disabled, isActive, isPointer, showActive, showBackground } =
    toRefs(config);
</script>
<style lang="scss" scoped>
  .active {
    color: red;
  }
  .inactive {
    color: blue;
  }

  .orange {
    color: orange;
  }
  .green {
    color: green;
  }

  .pointer {
    cursor: pointer;
  }
  .bg-pink {
    background-color: pink;
  }

  button {
    width: 60px;
    height: 30px;
    margin-left: 10px;
  }
</style>

绑定内联样式style

对象语法

CSS 属性名可以用驼峰式或短横线分隔(记得用引号括起来) 来命名。

<div :style="{ color: activeColor, fontSize: fontSize + 'px' }"></div>
<div :style="{ color: activeColor, 'font-size': fontSize + 'px' }"></div>

data: {
  activeColor: 'red',
  fontSize: 30
}

建议直接绑定到一个样式对象，这会让模板更清晰。 

<div :style="styleObject"></div>

data: {
  styleObject: {
    color: 'red',
    fontSize: '13px'
  }
}

数组语法

适合样式里面有三元运算判断。也可以绑定一个返回对象的计算属性。

<div :style="[{height:(data.length > 0?'70px':'calc(100% - 20px)')},{color:'#fff'}]">
    <span>盒子1</span>
    <span>盒子2</span>
</div>

<div class="container">
  <div 
    v-for="(item, index) in items" 
    :key="index" 
    class="item.name" 
    :style="itemStyle(item)"
    >
       {{ item.name }}
  </div>
</div>

data() {
  return {
    items: [
      {
        'name': 'ROW_1',
        'background': '#666666',
      },
      {
        'name': 'ROW_1',
        'background': '#956223',
      }
    ]
  }
},
computed: {
  itemStyle(item) {
    //  函数返回对象要用()括号括起来
    return (item) => ({
      backgroundColor: item.background,
    })
  }
}