Vue （5） - 動態切換 ClassName 及 Style 多種方法

假設我們要在原始 HTML 結構上動態為 .box 動態加上 className “rotate”

物件寫法

• v-bind 綁定一個 class，附加一個物件，但因為是物件的關係，所以可以插入一個以上的值

HTML 部份

<div class="box" :class="{'rotate':isTransform,'bg-danger':  boxColor }"></div>
          <p>請為此元素加上動態 className</p>
          <hr>
          <button class="btn btn-outline-primary" v-on:click="isTransform = !isTransform">選轉物件</button>
          <div class="form-check">
            <input type="checkbox" class="form-check-input" id="classToggle1" v-model="boxColor">
            <label class="form-check-label" for="classToggle1">切換色彩</label>
 </div>

JavaScript 部份

var app = new Vue({
           el: '#app',
           data: {
             isTransform: false,
             boxColor: false
           }
         })

CSS 部份

<style>
        .box {
          transition: transform .5s;
        }

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

物件寫法 2

直接在 Vue 的 data 結構裡宣告物件，並在 HTML 裡直接使用，再以點擊事件觸發旋轉，以 v-model 更改色彩

HTML 部份

<div class="box" :class="objectClass"></div>
          <p>請將此範例改為 "物件" 寫法</p>
          <hr>
          <button class="btn btn-outline-primary" v-on:click="objectClass.rotate = !objectClass.rotate">選轉物件</button>
          <div class="form-check">
            <input type="checkbox" class="form-check-input" id="classToggle2" v-model="objectClass['bg-danger']">
            <label class="form-check-label" for="classToggle2">切換色彩</label>
</div>

JavaScript 部份

var app = new Vue({
           el: '#app',
           data: {
             isTransform: false,
             boxColor: false,
             objectClass: {
               'rotate': false,
               'bg-danger': false,
             }
           }
         })

CSS 部份

<style>
        .box {
          transition: transform .5s;
        }

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

陣列方式

適用於 className 長度不確定者，動態地將 className 存在陣列裡面。

HTML 部份

<button class="btn  " :class="arrayClass">請操作本元件</button>

JavaScript 部份

var app = new Vue({
           el: '#app',
           data: {
             isTransform: false,
             boxColor: false,
             objectClass: {
               'rotate': false,
               'bg-danger': false,
             }
           }
         })

CSS 部份

<style>
        .box {
          transition: transform .5s;
        }

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

綁定行內樣式的方法

以 :style："{'樣式屬性'：'樣式的值'}" 插入行內樣式

HTML 部份

<div class="box" :style="{backgroundColor:'red'}"></div>
<div class="box" :style="styleObject"></div>// 以變數方式插入
 <div class="box" :style="[{backgroundColor:'red'},{borderWidth:'5px'}]"></div> //以陣列方式插入
 <div class="box" :style="[{styleObject,styleObject2]"></div> //插入多個物件

<h5>自動加上 Prefix (每個版本結果不同)</h5>
 <div class="box" :style="styleObject3"></div>

JavaScript 部份

<script>
  var app = new Vue({
    el: '#app',
    data: {
      isTransform: false,
      boxColor: false,
      objectClass: {
        'rotate': false,
        'bg-danger': false,
      },
      //行內樣式
      //使用駝峰式命名
      styleObject: {
        backgroundColor: 'red',
        borderWidth: '5px'
      },
      styleObject2: {
        backgroundColor: 'red',
        boxShadow: '3px 3px 5px rgba(0,0,0,0.16)'
      },
      styleObject3: {
        userSelect: 'none'
      },

    }
  })
</script>

CSS 部份

<style>
        .box {
          transition: transform .5s;
        }

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