# 绑定属性 >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> ```