前言

上一篇我們介紹了Vue指令：V-bind、V-on，那今天我們要學習另外一個Vue指令：V-bind
本文同步發表於Andy's Blog

V-bind

參考資料：Vue.js官網教學

目的：用來動態新增或綁定一個或多個屬性（src、class、style）
縮寫：:
我們先來看一個範例：
範例連結

<div id="app">
  <img v-bind:src="imgSrc" v-bind:class="className" alt="">
</div>

<script>
var app = new Vue({
  el: '＃app',
  data: {
    imgSrc: 'https://i.imgur.com/b28TAf1.png',
    className:'img-fluid'
  }
})
</script>

範例中為新增圖片屬性、className屬性
圖片來源：property 跟 attribute差別

V-bind 動態切換ClassName與Style

參考資料：官網介紹Class 與Style 綁定

1.動態加上className、陣列、物件寫法簡介：

練習連結

//{}內，前面是自定義className 後面是判斷式（truthiness才會顯示）
 <div :class="{ blue: isBlue }">
      1 Hello Vue!
    </div>
    //class:blue

    <div :class="'blue'">  
      2 Hello Vue!
    </div>
    //class:blue

    <div :class="largeFont">  
      3 Hello Vue!
    </div>
    //class:big-size 
                    
    <div :class="[largeFont, pinkBackground] "> 
      4 Hello Vue!
    </div>
    //class:big-size pink-bg

   var vm = new Vue({
      el: '#app',
      data: {
        isBlue: false,
        largeFont: 'big-size',
        pinkBackground: 'pink-bg',
       }
    });

小結論：

1.加上單引號時 class 是字串，如：:class="'blue'"，會去讀取已經定義好的 CSS 樣式
補充：className有-連結 如：btn-outline-primary需要使用引號
寫法如下： :class="'btn-outline-primary'"
2.沒有加上單引號則會去取得在 Vue 定義的 data 資料
若還是不清楚，可以觀看這範例練習連結

2.綁定style行內樣式寫法

這種寫法跟css寫法很像喔～
寫法：前面是css屬性名稱 後面值請去實體(vue instance)尋找
範例連結

<div id="app">
<div v-bind:style="{ color: activeColor, fontSize: fontSize + 'px' }">Hello Vue1!</div>

    <hr>

    <div :style="styleObject1">
      Hello Vue2!
    </div>

    <div :style="[styleObject1, styleObject2]">
      Hello Vue3!
    </div>
  </div>

 var vm = new Vue({
      el: '#app',
      data: {
        activeColor: 'red',
        fontSize: 30,
        styleObject1: {
          color: 'green',
          'font-size': '100px',  //有-，加上‘’即可
          marginBottom: '50px'
        },
        styleObject2: {
          color:'black',     //後面屬性會蓋掉前面顏色
          backgroundColor: 'cyan',
          lineHeight: '2em'
        }
      }
    });

注意：
1.Css屬性有-，記得加上''雙引號，才不會噴錯喔！

延伸閱讀：V-bind動態切換ClassName與Style

同樣介紹綁定樣式寫法，但相對上面例子更為複雜。建議先理解上面例子後，再來閱讀下面內容 練習檔案連結

一、物件寫法整理如下

使用物件寫法共分兩種

1.物件寫法ㄧ
//{}內，前面是className 後面是判斷式（true才會顯示）
<div class=“box” :class=“{‘rotate’:isTransform , ‘bg-danger’:boxColor}”></div>

<button class="btn btn-outline-primary" @click="isTransform = !isTransform">選轉物件</button>
說明：isTransform = !isTransform 可以參考下方備註

2.物件寫法二（很少使用，所以知道用法就好，不用深入）
<div class=“box” :class=“objectClass”></div>

<button class="btn btn-outline-primary"
<input type="checkbox" class="form-check-input" id="classToggle2" v-model="objectClass['bg-danger'] ">

data中資料
objectClass: {
    'rotate': false,
    'bg-danger': false },

其實兩種寫法都只是在切換true或false而已，來動態新增class
備註：點擊按鈕就把 isTransform 的結果顛倒過來

二、陣列寫法整理如下

陣列寫法也有兩種：適合用在長度不確定

1.直接綁定className
<button class=“btn” :class=“[ activeClass, errorClass, border]”>請操作本元件</button>

補充一下：data資料會這樣撰寫
data: {
       activeClass: 'active',
       errorClass: 'text-warning',
       border:'border',
}

2.使用陣列傳入
<button class="btn" :class="arrayClass">請操作本元件</button>

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

上面範例2使用陣列傳入原理：

藉由v-model綁定arrayClass，並透過value動態傳入className
補充：HTML input標籤的value 屬性

動態新增ClassName結論：

一、物件
1.物件寫法一中，className是否要加引號都沒差，但遇到有-className就一定要加
二、陣列
1.加上單引號時 class 是字串，會去讀取已經定義好的 CSS 樣式
補充：className有-連結 如：btn-outline-primary’需要使用引號
2.沒有加上單引號則會去取得在 Vue 定義的 data 資料

三、綁定style行內樣式寫法

總共有下列四種方式
<div class="box" :style="{['background-color']:'blue'}"></div>
<div class="box" :style="styleObject"></div>
<div class="box" :style="[{'backgroundColor':'green'},{'borderWidth':'20px'}]"></div>
<div class="box" :style="[styleObject,styleObject2]"></div>

styleObject: {
  backgroundColor: 'red',
  borderWidth: '5px'
},
styleObject2: {
  boxShadow: '3px 3px 5px rgba(0, 0, 0, 0.16)'
},

結果如下圖：

撰寫時，注意事項：
1.如果屬性名稱（attribute）有-，要用[]選取
Q1:什麼時候用v-bind、什麼時候用v-model?
A: v-bind 是將狀態綁定到元素上
而 v-model 是接收資料，所以基本上 v-model 只會用在 input, textarea, select