iT邦幫忙

2019 iT 邦幫忙鐵人賽

DAY 5
1
自我挑戰組

從0開始vue.js的30天學習日誌系列 第 5

05 Vue的模板語法 - v-bind屬性綁定

前面提到可使用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-->

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

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

v-bind指令學習完後,下一篇來學習v-on指令/images/emoticon/emoticon13.gif


上一篇
04 Vue的模板語法 - v-text, v-html
下一篇
06 Vue的模板語法 - v-bind綁定class及style
系列文
從0開始vue.js的30天學習日誌30

尚未有邦友留言

立即登入留言