綁定HTMLCLASS
在我沒看這之前，我覺得要寫綁定class ，應該像綁定數據一樣這么寫
class ={{class-a}}
看官方教程時，不推薦這么寫，推薦這樣
v-bind:class="{ 'class-a': isA, 'class-b': isB }"
官方的解釋，我覺得還是挺接地氣的，最起碼我能看的懂。
數據綁定一個常見需求是操作元素的 class 列表和它的內聯樣式。因為它們都是屬性，我們可以用 v-bind 處理它們：我們只需要計算出表達式最終的字符串。不過，字符串拼接麻煩又易錯。因此，在v-bind 用於 class 和 style 時，Vue.js 專門增強了它。表達式的結果類型除了字符串之外，還可以是對象或數組。
可以用對象語法來處理它們：
可以這樣：https://jsfiddle.net/miloer/36ek1uco/
也可以這樣：https://jsfiddle.net/miloer/36ek1uco/1/
也可以使用數組語法來處理：
https://jsfiddle.net/miloer/36ek1uco/2/
我覺得在樣式里用表達式判斷，這么做挺有創意的，不過個人感覺這么做又繁瑣了點，不過官方說：
當有多個條件 class 時這樣寫有些繁瑣。在 1.0.19+ 中，可以在數組語法中使用對象語法：
<div v-bind:class="[classA, { classB: isB, classC: isC }]">
這樣是不是好多了。
綁定內聯樣式：
這個和綁定HTMLCLASS 方法差不多。
https://jsfiddle.net/miloer/36ek1uco/3/
https://jsfiddle.net/miloer/36ek1uco/4/
自動添加前綴
這個我覺得挺方便的，當使用v-bind:style 需要添加前綴CSS時，Vue.js 會自動偵測並添加相應的前綴。
v-bind
- 縮寫：
: - 類型：
* (with argument) | Object (without argument) - 參數：
attrOrProp (optional) - 修飾符：用法：動態地綁定一個或多個 attribute，或一個組件 prop 到表達式。
.sync- 雙向綁定，只能用於 prop 綁定。.once- 單次綁定，只能用於 prop 綁定。.camel- 將綁定的特性名字轉回駝峰命名。只能用於普通 HTML 特性的綁定，通常用於綁定用駝峰命名的 SVG 特性，比如viewBox。
-
在綁定
class或style時，支持其它類型的值，如數組或對象。在綁定 prop 時，prop 必須在子組件中聲明。可以用修飾符指定不同的綁定類型。
沒有參數時，可以綁定到一個對象。注意此時
class和style綁定不支持數組和對象。 - 示例：
<!-- 綁定 attribute --> <img v-bind:src="imageSrc"> <!-- 縮寫 --> <img :src="imageSrc"> <!-- 綁定 class --> <div :class="{ red: isRed }"></div> <div :class="[classA, classB]"></div> <div :class="[classA, { classB: isB, classC: isC }]"></div> <!-- 綁定 style --> <div :style="{ fontSize: size + 'px' }"></div> <div :style="[styleObjectA, styleObjectB]"></div> <!-- 綁定到一個對象 --> <div v-bind="{ id: someProp, 'other-attr': otherProp }"></div> <!-- prop 綁定，"prop" 必須在 my-component 組件內聲明 --> <my-component :prop="someThing"></my-component> <!-- 雙向 prop 綁定 --> <my-component :prop.sync="someThing"></my-component> <!-- 單次 prop 綁定 --> <my-component :prop.once="someThing"></my-component> - 另見：