# 綁定屬性 >v-bind指令來綁定屬性 v-bind:可以簡寫為 ： <br> ``` <style> .redColor { color: red; } .fontSize { font-size: 18px; } </style> <div id="app1"> //綁定自己身上的屬性和類 <a :href="aHref" :class="[bool ? 'redColor fontSize' : '']">樣式會改變</a> <a :href="aHref" :class="{'redColor':bool,'fontSize':bool}">樣式也會改變</a> <img :src="imgSrc" alt=""> <button @click="changeA">點擊改變a鏈接的樣式</button> </div> <script> new Vue({ // 定義使用范圍 el: '#app1', // 定義使用變量 data: { // a: 2, bool: false, aHref: "https://www.baidu.com", imgSrc: "https://www.baidu.com/img/pc_1c6e30772d5e4103103bd460913332f9.png", }, // 定義方法 methods: { // 點擊事件的響應效果 changeA: function () { // 取反，重新賦值 this.bool = !this.bool; } } }) </script> ```