10-1.v-bind的基本使用

v-bind的src和href屬性

前面我們學的都是將data中的值放在DOM中進行顯示，除了這些，在開發中不僅這些需要被動態響應式顯示

有時候屬性可能也不是寫死的，也是可能根據某些變數進行動態決定的

例如圖片中的src這個屬性，如果是一些簡單的圖示，直接寫死進行引用即可；但是真實開發中，src肯定不是寫死的

比如淘寶中的輪播圖，你肯定是先向伺服器傳送一個請求，然後伺服器給你返回一個數據，而這個資料包含了很多url，zhexieurl需要動態的放在src裡面進行顯示，而不是直接寫死的

不僅是輪播圖，很多網站上的圖片都是這樣，圖片都不是寫死的，都是根據伺服器的資料，將資料請求過來放在data中，再動態的將這個繫結在src屬性上，就像之前在div中用{{message}}來繫結那樣

如果想要繫結屬性，就需要使用v-bind

當然，除了img中的src屬性，還有a中的href屬性，這些都是可以動態繫結的

我們來試一下，隨便在網站上覆制一個圖片地址

執行結果如下：

圖片和超連結都能夠正常顯示和使用

v-bind的語法糖

語法糖，即這個指令的簡寫

v-bind:src=”” 可以簡寫成 :src

執行結果與上面相同，如下：

10-2.動態繫結class屬性(物件/陣列)

物件語法寫樣式

執行結果如下：

類的樣式如果是多個還可以這樣寫：

執行結果如下：

需要先用v-on來監聽事件click，再給click事件裡面定義一個函式，來進行取反

這裡要注意兩點:

1.使用物件語法來進行寫樣式

2.在v-bind後的樣式不影響再寫普通樣式，兩種樣式會合並，同時存在

如果覺得這樣用物件方法寫語句太長，可以放在methods中

在methods中拿變數一定要加this

這樣寫與剛才執行結果相同

陣列語法

相對於物件語法用的比較少

執行結果如下：