Vue 3 用實作帶你看過核心概念 - Day 9：Class 與 Style 的樣式綁定

<div id="app">
  v-bind Class 物件綁定
  <div :class="{circleColor: classStyle}" class="circle mt-2">
    <span>Antonio</span>
  </div>
  <button @click="changeStyle" type="button" class="mt-2">樣式切換器</button>
</div>

const rootComponent = {
  data() {
    return {
      classStyle: true
    };
  },
  methods: {
    changeStyle() {
      this.classStyle = this.classStyle === true ? false : true;
    }
  }
};

<div id="app">

  <div class="card">
    <h2>Vue 數據綁定樣式 + 方法改變</h2>
    <div :class="classObject" class="box">
    </div>
    <button @click="changeRotate" class="mt-2">旋轉按鈕</button>
  </div>

  <div class="card">
    <h2>Vue 計算屬性搭配樣式綁定</h2>
    <div :class="getButtonClass" class="box">
    </div>
    <button @click="changeClassStatus" class="mt-2">旋轉按鈕</button>
  </div>

</div>

const rootComponent = {
  data() {
    return {
      // Vue 數據綁定樣式 Class + 方法改變使用到的物件
      classObject: {
        rotate: false
      },
      // Vue 計算屬性搭配 Class 樣式綁定，僅控制依賴狀態
      isRotate: true
    };
  },
  methods: {
    // Vue 數據綁定樣式 Class + 方法直接改變定義樣式是否呈現
    changeRotate() {
      this.classObject.rotate = this.classObject.rotate === true ? false : true;
    },
    // Vue 計算屬性搭配 Class 樣式綁定，改變依賴項，由計算屬性重新組合 Class 樣式
    changeClassStatus(){
      this.isRotate = !this.isRotate;
    }
  },
  computed:{
    // 根據 isRotate 變數狀態變動組合的 Class 樣式
    getButtonClass(){
      return {
        rotate: this.isRotate
      }
    }
  }
}

<div id="app">
  v-bind Class 物件綁定
  <!--   Class 物件，規則 -> {Class名稱：布林值} -->
  <div :style="{'background-color': bgColor, color: textColor}" class="circle mt-2">
    <span>Antonio</span>
  </div>
  <button @click="changeStyle" type="button" class="mt-2">樣式切換器</button>
</div>

const rootComponent = {
  data() {
    return {
      bgColor: "purple",
      textColor: "white"
    };
  },
  methods: {
    // 改變樣式
    changeStyle() {
      this.bgColor = this.bgColor === "purple" ? "#ccc" : "purple";
      this.textColor = this.textColor === "white" ? "black" : "white";
    }
  }
}

<div id="app">

  <div class="card">
    <h2>Vue Style 陣列屬性綁定</h2>
    <div :style="[rotateStyle, colorStyle]" class="box">
    </div>
    <button @click="changeStyle" class="mt-2">Style 樣式切換</button>
  </div>

  <div class="card">
    <h2>Vue Class 陣列屬性綁定</h2>
    <div class="box" :class="[rotateClass, bgClass]">
    </div>
    <button @click="changeClass" class="mt-2">Class 樣式切換</button>
  </div>

</div>

const rootComponent = {
  data() {
    return {
      // Vue 數據綁定樣式旋轉 style + 方法改變使用到的物件
      rotateStyle: {
        transform: "rotate(45deg) scale(0.707)"
      },
      colorStyle: {
        'background-color': "red"
      },
      // Vue 計算屬性搭配 class 樣式綁定，僅控制依賴狀態
      rotateClass: {
        rotate: false
      },
      bgClass: {
        'bg-primary': false,
        'bg-secondary': true
      }
    };
  },
  methods: {
    // Vue 數據綁定樣式 Style + 方法直接改變定義樣式是否呈現
    changeStyle() {
      this.rotateStyle.transform = this.rotateStyle.transform.includes("rotate")
        ? "scale(1)"
        : "rotate(45deg) scale(0.707)";

      this.colorStyle.backgroundColor =
        this.colorStyle.backgroundColor === "red" ? "green" : "red";
    },
    // Vue 數據綁定樣式 Class + 方法直接改變定義樣式是否呈現
    changeClass() {
      this.rotateClass.rotate = !this.rotateClass.rotate;
      this.bgClass['bg-primary'] = !this.bgClass['bg-primary']
      this.bgClass['bg-secondary'] = !this.bgClass['bg-secondary']
    }
  }
}

<div :style="{ display: ['-webkit-box', '-ms-flexbox', 'flex'] }"></div>