1.动态绑定class对象语法

对象语法

<template>
  <div class="main-wrapper">
    <b-button
      type="primary"
      size="small"
      :class="{'btn-save': isActive}"
      @click="change"
    >
      切换
    </b-button>
  </div>
</template>

<script>
import { reactive, toRefs } from '@vue/composition-api'

export default {
  name: 'Main',
  components: {
  },
  setup (props, context) {
    const state = reactive({
      isActive: false
    })
    const change = () => {
      state.isActive = !state.isActive
    }
    return {
      ...toRefs(state),
      change
    }
  }
}
</script>

<style lang="scss" scoped>
.main-wrapper {
  .btn-save {
  }
}
</style>

可多个键值对

<b-button
  type="primary"
  size="small"
  :class="{'btn-save': isActive, 'other': true}"
  @click="change"
>
  切换
</b-button>

可以和普通的键值对共存

<b-button
  type="primary"
  size="small"
  class="my-btn"
  :class="{'btn-save': isActive, 'other': true}"
  @click="change"
>
  切换
</b-button>

2.动态绑定class数组语法

<template>
  <div class="main-wrapper">
    <b-button
      type="primary"
      size="small"
      class="my-btn"
      :class="['btn-save', currentClass, {'test': isActive}, isActive ? 'test-btn' : '']"
      @click="change"
    >
      切换
    </b-button>
  </div>
</template>

<script>
import { reactive, toRefs } from '@vue/composition-api'

export default {
  name: 'Main',
  components: {
  },
  setup (props, context) {
    const state = reactive({
      isActive: false,
      currentClass: 'my-btn'
    })
    const change = () => {
      state.isActive = !state.isActive
    }
    return {
      ...toRefs(state),
      change
    }
  }
}
</script>

<style lang="scss" scoped>
.main-wrapper {
  .btn-save {
  }
}
</style>

3.动态绑定style -对象类型

<template>
  <div class="main-wrapper">
    <b-button
      type="primary"
      size="small"
      :style="{color: fontColor, 'font-size': '30px'}"
      @click="change"
    >
      切换
    </b-button>
  </div>
</template>

<script>
import { reactive, toRefs } from '@vue/composition-api'

export default {
  name: 'Main',
  components: {
  },
  setup (props, context) {
    const state = reactive({
      isActive: false,
      fontColor: 'red'
    })
    const change = () => {
      state.isActive = !state.isActive
    }
    return {
      ...toRefs(state),
      change
    }
  }
}
</script>

<style lang="scss" scoped>
.main-wrapper {
  .btn-save {
  }
}
</style>

4.动态绑定style -对象

<template>
  <div class="main-wrapper">
    <b-button
      type="primary"
      size="small"
      :style="objStyle"
      @click="change"
    >
      切换
    </b-button>
  </div>
</template>

<script>
import { reactive, toRefs } from '@vue/composition-api'

export default {
  name: 'Main',
  components: {
  },
  setup (props, context) {
    const state = reactive({
      isActive: false,
      fontColor: 'red',
      objStyle: {
        fontSize: '30px',
        color: 'red'
      }
    })
    const change = () => {
      state.isActive = !state.isActive
    }
    return {
      ...toRefs(state),
      change
    }
  }
}

5.动态绑定style -数组语法

<b-button
  type="primary"
  size="small"
  :style="[objStyle, {backgroundColor: 'black'}]"
  @click="change"
>
  切换
</b-button>

6.动态绑定属性名

<template>
  <div class="main-wrapper">
    <b-button
      type="primary"
      size="small"
      :[name]="'test'"
      @click="change"
    >
      切换
    </b-button>
  </div>
</template>

<script>
import { reactive, toRefs } from '@vue/composition-api'

export default {
  name: 'Main',
  components: {
  },
  setup (props, context) {
    const state = reactive({
      isActive: false,
      name: 'class'
    })
    const change = () => {
      state.isActive = !state.isActive
    }
    return {
      ...toRefs(state),
      change
    }
  }
}
</script>

<style lang="scss" scoped>
.main-wrapper {
  .btn-save {
  }
}
</style>

7.直接绑定对象（给组件传参）

<template>
  <div class="main-wrapper">
    <h2 v-bind="infos">bind</h2>
  </div>
</template>

<script>
import { reactive, toRefs } from '@vue/composition-api'

export default {
  name: 'Main',
  components: {
  },
  setup (props, context) {
    const state = reactive({
      infos: {
        name: 'test',
        age: 20,
        height: 180
      }
    })
    return {
      ...toRefs(state)
    }
  }
}
</script>

<style lang="scss" scoped>
.main-wrapper {
  .btn-save {
  }
}
</style>