12-0 js、style

const App = {
  data() {
    return {
      isTransform: true,
      boxColor: false,
      objectClass: {
        rotate: true,
        'bg-danger': true
      },
      // Array 操作
      arrayClass: [''],

      // 行內樣式
      // 使用駝峰式命名
      styleObject: {
        backgroundColor: 'red',
        borderWidth: '5px'
      },
      styleObject2: {
        boxShadow: '3px 3px 5px rgba(0, 0, 0, 0.16)'
      },
      styleObject3: {
        userSelect: 'none'
      }
    };
  },
  methods: {
    change: function (key) {
      this[key] = !this[key];
    },
    addClass(arr) {
      this.arrayClass.push(...arr);
    }
  },
};

Vue.createApp(App).mount('#app');

<style>
  .box {
    background-color: var(--bs-light);
    border: 1px solid var(--bs-gray);
    width: 80px;
    height: 80px;
  }

  .box {
    transition: all .5s;
  }

  .box.rotate {
    transform: rotate(45deg)
  }
</style>

12-1 樣式切換:物件寫法

<!-- key值對應className，物件的值對應判斷式(true)  -->
<!-- 當要綁定樣式時，而樣式有'-'時會需要轉為字串用''保裹起來 -->
<div class="box" :class="{ rotate:isTransform ,'bg-danger' :boxColor }"></div>
<hr>
<button class="btn btn-outline-primary" v-on:click="change('isTransform')">選轉物件</button>
<button class="btn btn-outline-primary ms-1" v-on:click="change('boxColor')">切換色彩</button>

12-2 帶入js裡資料的物件objectClass寫法

<div class="box" :class="objectClass"></div>

12-3 陣列寫法

<button class="btn" :class="['btn-secondary','disabled']">請操作本元件</button>
<!-- 將多個class用陣列方式呈現樣式 -->
<button class="btn" :class="arrayClass">請操作本元件</button>
<!-- 點選滑鼠事件addclass傳入觸發addclass方法，將收到樣式資料傳入arryclass陣列，當有綁定arryclass陣列按鈕將觸發所新增樣式 -->
<button type="button" class="btn btn-outline-primary" v-on:click="addClass(['btn-primary', 'disabled'])">為陣列加入Class</button>

12-4 綁定行內樣式

<!-- 物件key值帶入Style屬性，屬性若有中間'-'時須改為小駝峰寫法 -->
<!-- 值則是帶入相對應的值 -->
<div class="box" :style="{backgroundColor:'red' }"></div>
<div class="box" :style="styleObject"></div>
<div class="box" :style="[styleObject,styleObject2,styleObject3]"></div>

知識點來源:六角課程

以上是今天所提供知識點如有誤，再請務必在下面留言~