參考資料：
Vue.js官網教學
V-bind
目的：用來動態新增或綁定一個或多個屬性（src、class、style）
縮寫：:
我們先來看一個範例：
範例連結
1
2
3
4
5
6
7
8
9
10
11
12
13
| <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 綁定
動態加上className、陣列、物件寫法簡介：
練習連結
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
| //{}內，前面是自定義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
|
1
2
3
4
5
6
7
8
| 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 資料
若還是不清楚，可以觀看這範例練習連結
綁定style行內樣式寫法
這種寫法跟css寫法很像喔～
寫法：前面是css屬性名稱 後面值請去實體(vue instance)尋找
範例連結
1
2
3
4
5
6
7
8
9
10
11
12
13
14
| <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>
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
| 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
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
| 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
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
| 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行內樣式寫法
1
2
3
4
5
6
7
8
9
10
11
12
13
| 總共有下列四種方式
<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