接下來要來介紹一個新的指令 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-fluid 為 Bootstrap 4 的 class ，可以參考 Bootstrap 4