# HTML 樣式綁定 (2-2)
###### tags: `Vue`、`2. 指令語法全介紹`
2022.3.2

## Class v-bind綁定
### 物件寫法
CSS

<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>

* 寫法1

<div class = 'box' :class = '{rotate:true, 'bg-danger':boxColor}'>

* 寫法2

<div class='box' :class="objclass">

<script>
    const App = {
      data() {
        return {
                objclass:{
                   'bg-danger':true,
                    rotate:false,
            },}}}
</script>

### 陣列寫法

<button :class="['btn', btn-primary' , activate]">

## style 行內樣式綁定 :
樣式要使用駝峰式命名 :
原本「background-color」 改成 「backgroundColor」

<div class="box" :style ="{backgroundColor:'red'}"></div> //使用單一style
<div class="box" :style = "styleObject"></div> //套用物件style
<div class="box" :style = "[styleObject, styleObject2, styleObject3]"></div>  //一次套用多style物件

<script>
const App = {
  data() {
    return {
      // 行內樣式
      // 使用駝峰式命名
      styleObject: {
        backgroundColor: 'red',
        borderWidth: '5px'
      },
      styleObject2: {
        boxShadow: '3px 3px 5px rgba(0, 0, 0, 0.16)'
      },
      styleObject3: {
        userSelect: 'none'
      }
    };
  },
</script>