iT邦幫忙

第 11 屆 iT 邦幫忙鐵人賽

DAY 4
0
自我挑戰組

新手初探 Vue系列 第 4

鐵人賽Day04 - v-bind 動態屬性指令

接下來要來介紹一個新的指令 v-bind,它是用來綁定 HTML 標籤的屬性
照慣例,Vue 的架構如下:

<div id="app">
    <img src="" alt="">
</div>

<script>
    var app = new Vue({
        el: '#app',
        data: {
            imgSrc: 'https://images.unsplash.com/photo-1479568933336-ea01829af8de?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=d9926ef56492b20aea8508ed32ec6030&auto=format&fit=crop&w=2250&q=80'
        }
    })
</script>

我們在 data 內新增了一個 imgSrc 的變數,並放置圖片的正確路徑,但是要如何把這個資料綁上去?
這時候在頁面上我們就要針對 img 標籤的 src 屬性下 v-bind 指令,並把 imgSrc 變數代入 src 屬性的值

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

這時候就會發現,圖片會正常顯示了,假設我們還想新增 class ,則可以繼續在 data 內新增:

<script>
    var app = new Vue({
        el: '#app',
        data: {
            imgSrc: 'https://images.unsplash.com/photo-1479568933336-ea01829af8de?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=d9926ef56492b20aea8508ed32ec6030&auto=format&fit=crop&w=2250&q=80',
            className: 'img-fluid'
        }
    })
</script>

img 標籤上繼續綁定 class 這個屬性,並把在 data 內新增的 className 變數代入進去

<div id="app">
    <img v-bind:src="imgSrc" v-bind:class="className" alt="">
</div>
  • .img-fluidBootstrap 4class ,可以參考 Bootstrap 4

上一篇
鐵人賽Day03 - 試著把 Vue 的資料呈現在頁面上
下一篇
鐵人賽Day05 - v-for & v-if
系列文
新手初探 Vue30

尚未有邦友留言

立即登入留言