在 Vue 中，我們可以透過 v-bind 這個指令，輕鬆對屬性、樣式、資料等等進行動態綁定。

v-bind：屬性

拿個最常見的例子，圖片網址的綁定可以這樣寫：v-bind:src。
我們也可以把　v-bind　簡寫成　:，
以上面的例子來說，就是把　v-bind:src 直接縮寫成 :src。

若加上v-bind:title，當滑鼠移入時就會顯示對應名稱。

<p>{{ breakfastShop.name }}</p>
    <img v-bind:src="breakfastShop.imgUrl" v-bind:title="breakfastShop.name" class="square-img" alt="">

除此之外，我們也可以試著綁定其他屬性。
我們這次綁定的屬性是 disabled。當isFull是 true 的狀態下，就無法送出表單。

 <form action="">
    <input type="text" value="我要吃蘿蔔糕">
    <button type="submit" :disabled="isFull">送出</button>
  </form>

  <button type="button" v-on:click="change('isFull')">狀態切換</button>

v-bind + v-for 組合技

我們可以為每個 input 綁定特定的id。

<div class="form-check">
    <input class="form-check-input" type="checkbox" value="" :id="item.name">
    <label class="form-check-label" :for="item.name">
      我要這個
    </label>
  </div>

表達式運用（串接）

透過表達式的方式，動態的切換HTML屬性。

<p>{{ imageSize }}</p>
  <input type="range" min="100" max="1000" v-model="imageSize">
  <br>
  <img :src="`${breakfastShop.resizeImg}&w=${imageSize}`" alt=""
  >