Class and Style Bindings

透过昨天的范例我们知道要绑定HTML属性需要使用v-bind指令，而今天我们要介绍的是v-bind绑定class和style
我们一样先来看一段官网中对於class和style绑定的介绍

A common need for data binding is manipulating an element’s class list and its inline styles. Since they are both attributes, we can use v-bind to handle them: we only need to calculate a final string with our expressions.

在今天的范例中使用到的是inline style的绑定，他看起来很像CSS但他其实是JavaScript的物件，所以在JavaScript的部分使用了一个colors阵列，把红、绿、蓝三个物件装起来，让使用者能够透过点击button来改变字的颜色，这个范例中还设计了一个当使用者将滑鼠移到Hello Vue.js时他会有'欢迎来到Vue.js'的提示效果

最後来回顾一下到目前为止介绍的3种绑定:
{{ }}他是做text的资料绑定，v-bind是做属性绑定，他可以解决{{}}不能绑定在HTML属性的问题，所以它可以绑定HTML属性像是照片、连结等，而v-model则是做表单的绑定，像是文字输入框、单选、多选以及下拉式选单等

github