###### tags:`Vue`
# 1.Vue動態切換className和style的多種方法

1. 單純物件綁定class
2. 物件寫法一 使用**btn**和**checkbox box**動態操控
3. 使用物件綁定v-bind:class=""(適用於資料量較大情況下)
4. <span style="color:red">不能用-作為物件名稱</span>
5. 預設空陣列,動態加入class,非使用true or fasle
6. 綁定行內樣式三種方式

<iframe height="265" style="width: 100%;" scrolling="no" title="Vue - switch class &amp; style" src="https://codepen.io/corly74/embed/bGwvjwE?height=265&theme-id=dark&default-tab=html,result" frameborder="no" loading="lazy" allowtransparency="true" allowfullscreen="true">
See the Pen <a href='https://codepen.io/corly74/pen/bGwvjwE'>Vue - switch class &amp; style</a> by peiyun
(<a href='https://codepen.io/corly74'>@corly74</a>) on <a href='https://codepen.io'>CodePen</a>.
</iframe>

### 1.單純物件綁定class
1-1 畫面已有一個現存正方形BOX
1-2 在css設定用vue綁定
1-3 正方形BOX上使用<kbd>v-bind:class=""</kbd>綁定class

html//
 <div id="app">
 <div class="box" v-bind:class="style01"></div>
 </div>

 css//
 
 *畫面預設正方形
 .box{
  display: inline-block;
  width: 5rem;
  height: 5rem;
  margin: .25rem;
  background-color: #f5f5f5;
  border: 1px solid;
}
 
 .bg-pink{
  background-color:rgb(250, 129, 190);

//javascript

var app = new Vue({
  el: '#app',
 
 data: {
    style01:{
      active: true,
      'bg-pink': true,
    },  
   
}
});

### 2.物件寫法一 使用btn和checkbox box動態操控

<p style="color:red">
因為要click btn才能啟動class綁定,所以在正方形box綁定class時預設狀態是fasle,要click box才是true
</p>

使用<kbd>< div v-bind:class="{ 'active': isActive }">< /div></kbd>和<kbd>v-on:click="isActive = !isActive"</kbd>

* active = class name
* isActive = 物件啟用狀態 ( true or fasle )
* !驚嘆號在javascript裡面意思是反轉 , <kbd>v-on:click="isActive = !isActive"</kbd>為點擊button之後 , isActive預設如果是fasle變成true,反之亦然.
* v-bind:classd可以插入組一上的class,方法為<kbd>< div v-bind:class="{ 'active': isActive ,'active2': isActive2 }">< /div></kbd>

* checkbox box有開啟修改功能,所以在data預設checkbox box:fasle ,操作實打開checkbox box會讓fasle修改為true

html//
<div id="app">


<div class="box ml-3" v-bind:class="
{ 'rotate': isTransform, 'bg-danger': boxColor}"></div>

<button class="ml-3 mt-3 btn btn-outline-primary 
d-block" v-on:click="isTransform = !isTransform" >
旋轉物件</button> 

  <div class="form-check ml-3 mt-2">
    <input type="checkbox" class="form-check-input" 
    id="classToggle1" v-model="boxColor">
    
    <label class="form-check-label" for="classToggle1">切換色彩</label>
  </div>
  
  </div>

 css//
 
 *畫面預設正方形
 .box{
  display: inline-block;
  width: 5rem;
  height: 5rem;
  margin: .25rem;
  background-color: #f5f5f5;
  border: 1px solid;
}
 
 .box.rotate {
  transform: rotate(45deg)
}

//js

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

},
});

### 3.使用物件綁定v-bind:class=""(適用於資料量較大情況下)

原始公式
`< div v-bind:class="{ ‘active’: isActive ,‘active2’: isActive2 }">`

</div>

比如:

<style>
.rotate{ transform: rotate(45deg)};
.bg-danger{background-color:red};
</style>

<div id="app">
   < div class="box" v-bind:class=
   "{ ‘rotate’: fasle ,‘bg-danger’: fasle }">< /div>
< /div>

可以改成

<div id="app">
   < div class="box" v-bind:class="objectClass>
< /div>
</div>

<script>
var app = new Vue({
el: '#app',
  data: { 
  objectClass: {
      'rotate': false,
      'bg-danger': false,},
});



</script>

### <span style="color:red">4.不能用-作為物件名稱</span>
接續3,用input-type綁定陣列物件,開啟關閉顏色class<kbd>
bg-danger
</kbd>,因為有<kbd>-</kbd>,物件上不能使用<kbd>-</kbd>,需要轉寫.

比如:

v-model="objectClass.bg-danger"
無法運作

要改成
`v-model="objectClass['bg-danger']"`

### 5.預設空陣列,動態加入class,非使用true or fasle

5-1 在物件上用<kbd>v-bind:class="arrayName"</kbd>綁上空陣列
5-2 在script data裡面設定一個 <kbd>arrayName:[]</kbd>空陣列
5-3 在inputtye控制項上綁上 <kbd>v-model="arrayName" value="要綁上class名稱"</kbd>

<div id="app">



<button class="btn "  v-bind:class="arrayClass">請操作本元件</button>
 
  <div class="form-check ">
    <input type="checkbox" class="form-check-input" 
    id="classToggle3"  v-model="arrayClass" value="btn-outline-primary">
    
    <label class="form-check-label" 
    for="classToggle3">切換樣式</label>
  </div>
  
  
  <div class="form-check ">
    <input type="checkbox" class="form-check-input"
    id="classToggle4"  v-model="arrayClass" value="active">
    <label class="form-check-label" 
    for="classToggle4">啟用元素狀態</label>
  </div>

</div>

<script>
var app = new Vue({
el: '#app',
data:{

     arrayClass: [],
     },
});



</script>

### 綁定行內樣式三種方式
6-1

方法一
v-bind:style="object"
在script新增object[]裡面新增class,比如  

      styleObject: {
      backgroundColor: 'red',
      borderWidth: '5px'
    },

方法二 承上
v-bind:style="backgroundColor: 'red'"

方法三
插入多個物件
`<div v-bind:style="
{ color: activeColor , fontSize: fontSize + 'px'} "></div>`

</div>
  <div class="box" v-bind:style="[{backgroundColor: 'red'},
  {boxShadow: '3px 3px 5px rgba(0, 0, 0, 0.16)'}]"></div>