前面提到可使用v-text、{{}}來做資料綁定，但若要綁定html屬性為資料時，必須透過v-bind語法：

v-bind

範例

使用v-bind指令:後面接欲綁定的HTML屬性，以下綁定checked屬性：

<!--html-->
<div id="app01">
  <input type="checkbox" v-bind:checked="selected">
</div>
<!--js-->
<script>
    new Vue({
      el: "#app01",
      data: {
        selected: true,
      },
    });
</script>

render結果會得到一個打勾的checkbox ( 懶的截圖 )

使用表達式

不管是用{{}} 或 v-bind方法綁定資料，除了單純屬性的值之外還可以使用表達式：

表達式 ( expressions )：

只要會產生值，都算表達式。
官方文件例子：

<!---有效--->
{{ number + 1 }}
{{ ok ? 'YES' : 'NO' }}
{{ message.split('').reverse().join('') }}
<div v-bind:id="'list-' + id"></div>

<!---無效--->
<!-- 這是述句，不是表達式 -->
{{ var a = 1 }}
<!-- 流控制也不會生效，請使用三元表達式 -->
{{ if (ok) { return message } }}

這邊一樣使用checkbox做練習：

<div id="app02">
  <input type="checkbox" v-bind:checked="number === 5">
  <!--number === 5 //true -->
</div>
<!--js-->
<script>
    new Vue({
      el: "#app02",
      data: {
        number: 5,
      },
    });
</script>

render結果會一樣會得到一個打勾的checkbox ( 懶的截圖 )

縮寫

熟悉v-bind指令後，可以使用縮寫 (不熟悉也可以啦... )

<input type="checkbox" v-on:checked="selected"> <!--完整-->
<input type="checkbox" :checked="selected">     <!--縮寫-->

上面範例使用input的checked屬性來綁定，除此之外其他HTML元素還有好多好多屬性可以用：

HTML屬性有哪些？
舉例幾個：

<a href="" />             <!--href-->
<img scr="" alt="" />     <!--src / alt-->
<p style="" />            <!--style-->
<div class="" />          <!--class-->
<div hidden  />           <!--hidden-->
<div data-*="" />         <!--data-*-->

<!--form-->
<input type="text" placeholder="" /> <!--placeholder-->
<input type="text" disabled />       <!--disabled-->
<input type="text" readonly />       <!--readonly-->

欲知道所有，以下補充詳細資料供參考

• HTML的屬性列表：
  HTML attribute reference - HTML | MDN

上面的舉例裡有一個data-*順便複習一下

• HTML5 data-* ：
  什麼是 HTML 5 中的資料屬性（data-* attribute）-PJCHEN

v-bind指令學習完後，下一篇來學習v-on指令