v-bind
縮寫：:
預期：any (with argument) | Object (without argument)
參數：attrOrProp (optional)
修飾符：
- .prop - 被用於綁定 DOM 屬性 (property)。(差別在哪裏？) .camel - (2.1.0+) 將
- kebab-case 特性名轉換爲 camelCase. (從 2.1.0 開始支持) .sync (2.3.0+)
- 語法糖，會擴展成一個更新父組件綁定值的 v-on 偵聽器。
用法：
動態地綁定一個或多個特性，或一個組件 prop 到表達式。
在綁定 class 或 style 特性時，支持其它類型的值，如數組或對象。可以通過下面的教程鏈接查看詳情。
在綁定 prop 時，prop 必須在子組件中聲明。可以用修飾符指定不同的綁定類型。
沒有參數時，可以綁定到一個包含鍵值對的對象。注意此時 class 和 style 綁定不支持數組和對象。
列子
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <script src="https://cdn.jsdelivr.net/npm/[email protected]"></script></head><style> .red{ background-color: red; } .width{ width:400px; }</style><body> <!-- Vue指令 --> <!-- 1.v-bind 綁定屬性 --> <!-- v-bind <==> : --> <div id="app"> <h4 :class="[{red : true},h5Class]">{{ name }}</h4> <img v-bind:src="imgUrl" v-bind:alt="name" :style="[{width:imgWidth},imgStyle]"/> </div>
<script> // v-bind 綁定屬性 const vm=new Vue({ el: '#app', data:{ name:"VUE", imgUrl:"https://cn.vuejs.org/images/logo.png", h4Class:'red', h5Class:'width', imgWidth: '200px', imgStyle: { border: '10px solid red' }
}
}) </script>
</body></html>
運行結果
點擊變化顏色的小實例
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <script src="https://cdn.jsdelivr.net/npm/[email protected]"></script></head><style> .red{ background-color: red; } .green{ background-color: green; } .yellow{ background-color: yellow; }
</style><body> <!-- Vue指令 --> <!-- 1.v-bind 綁定屬性 --> <!-- v-bind <==> : --> <!-- 2.v-on:xxx --> <div id="app"> <button v-on:click="handleClick">點擊</button> <h4 :class="h4ClassArr[h4Index]">{{ name }}</h4> </div>
<script> // v-bind 綁定屬性 const vm=new Vue({ el: '#app', data:{ name:"VUE", imgUrl:"https://cn.vuejs.org/images/logo.png", h4Class:'red', h5Class:'width', imgWidth: '200px', imgStyle: { border: '10px solid red' }, h4ClassArr:['red','green','yellow'], h4Index:0, h4Count:0 }, methods:{ handleClick(){ this.h4Index= ++ this.h4Count % 3
}
}
}) </script>
</body></html>
運行結果
