Andy's blog

If you always do what you've always done, you'll always get what you've always got.

0%

Vue指令V-bind介紹

參考資料:
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