vue-4 CSS綁定/Style綁定

<template>
  <div>
    <div class="border-style">
      <h1 :class="class3">-----------------CSS綁定-------------------</h1>
      <div :class="{'c1':clEnable, 'c2':c2Enable}">CSS屬性綁定，注意疊加效果</div>
      <div :class="calCss">CSS屬性綁定 使用計算屬性</div>
      <div :class="[class3,class4]">CSS屬性綁定 數組語法</div>
      <h1 :class="{'c1':c1Enable}">----------------Style綁定---------------</h1>
      <div :style="{'color':c5,'font-size':c6+'px'}">Style屬性綁定</div>
      <div :style="[c7,c8]">【數組語法】</div>
    </div>
  </div>
</template>
<script>
export default {
  name: 'Css',
  data() {
    return {
      c1Enable: true,
      c2Enable: true,
      class3: 'c3',
      class4: 'c4',
      c5: 'green',
      c6: 25,
      c7: {
        'background-color': 'lightblue',
      },
      c8: {
        color: 'yellow',
      },
    }
  },
  computed: {
    calCss() {
      return {
        c1: true,
        c2: true,
      }
    },
  },
  methods: {},
}
</script>
<style scoped>
.c1 {
  color: red;
}
.c2 {
  font-size: 40px;
}
.c3 {
  color: blue;
}
.c4 {
  font-size: 30px;
}
.border-style {
  border-width: 2px;
  border-style: solid;
  border-color: yellow;
}
</style>