Hike News
Hike News

v-bind 動態屬性

Vue, 筆記

學習 Vue 的動態屬性綁定 的筆記

關於 v-bind

要讓在 HTML 標籤內的屬性 [例如 ： src 、 class 、 style 等 ] 能和 Vue 程式碼的 data 內容動態呈現，就加上 v-bind 綁定吧。

1
<button v-bind:[key]="value"></button>

關於 HTML 標籤內的 屬性列表可參考這裡

v-bind 的使用方式

插入圖片 <img>

1
2
3
4
5
6
7
8
9
10
11
12
<div id="app">
  <img v-bind:src="imgSrc" alt="">
</div>

<script>
var app = new Vue({
  el: '#app',
  data: {
    imgSrc: 'img.jpg'
  }
})
</script>

把 字串和 字串 接成一個

1
<img v-bind:src="'/path/to/images/' + fileName">

綁定 Class 名稱

1
2
3
4
5
6
7
8
9
10
11
12
<div id="app">
  <div v-bind:class="className"></div>
</div>

<script>
var app = new Vue({
  el: '#app',
  data: {
    className: 'item'
  }
})
</script>

綁定 Style 的屬性和值

  • 要注意使用 CSS 遇到有 - 的屬性時要加上單引號 ' 或是改成 駝峰的寫法 ，不然會出錯。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
<div id="app">
  <span v-bind:style="{'background-color':BGcolor, color: textColor, fontSize: size + 'px'}">Hello World</span>
</div>

<script>
var app = new Vue({
  el: '#app',
  data: {
    textColor: 'red',
    BGcolor: 'gray',
    size: 56
  }
})
</script>

合併成物件

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<div id="app">
  <span v-bind:style="{
    'background-color':BGcolor,
    color: textColor,
    fontSize: size + 'px'
  }">Hello World</span>
  <img v-bind="{ src: '/path/to/images/' + imgSrc, class: className, alt: altText}">
</div>


<script>
var app = new Vue({
  el: '#app',
  data: {
    imgSrc: 'img.jpg',
    className: 'item',
    altText: '這是一張圖片',
    textColor: 'red',
    BGcolor: 'gray',
    size: 56
  }
})
</script>

刪除 v-bind: 縮寫成 : 吧

v-bind: 提供了縮寫 : ，讓原本一長串回到像是在寫 HTML

但只有加上冒號的 v-bind: 適用， v-bind 是不能縮寫成 : 的

1
2
3
4
5
6
7
8
9
10
11
12
<!-- 寫法 -->
<button :[key]="value"></button>

<!-- 使用在 img -->
<img v-bind:src="imgSrc" alt="">
<!-- 縮寫 -->
<img :src="imageSrc" alt="">

<!-- 使用多個時 -->
<img v-bind:src="imgSrc" v-bind:class="className" v-bind:style="{width: '350px'}" alt="">
<!-- 縮寫 -->
<img :src="imgSrc" :class="className" :style="{width: '350px'}" alt="">

參考文件

指令 v-bind