css綁定 · wex5

## WeX5數據綁定05：css綁定 css綁定(bind-css)為元素添加或刪除class，從而改變元素的樣式。css綁定非常有用，可以根據數據動態改變元素的樣式，比如負值用紅色來顯示。另外還有一種更直接的改變樣式的方法，即通過style綁定。 ### 靜態class的css綁定示例代碼： //.w片段 //< 是<的轉義符</pre> <div bind-css="{ profitWarning: currentProfit.get() < 0 }"> Profit Information </div> //.js片段 //初始正值，"profitWarning" class不會被應用到div上 this.currentProfit = justep.Bind.observable(15000); //設置負值，"profitWarning" class將會被應用到div上 this.currentProfit.set(-50); 上面這段代碼，根據currentProfit的值會動態改變樣式。如果currentProfit<0，就會在div添加樣式class “profitWarning”，否則就會移除該class。綁定規則：靜態class的css綁定通常都是需要判斷完成的，如果表達式的返回值為true，則添加該class，如果為false，則移除該class。 ### 動態class的css綁定如果css綁定的值是字符串，則css綁定將會直接把該字符串值作為樣式設置到元素class上。 //.w片段 <div bind-css="profitStatus">Profit Information</div> //.js片段 this.currentProfit = justep.Bind.observable(15000); this.currentProfit.set(-50); this.profitStatus = justep.Bind.computed(function() { return this.currentProfit.get() < 0 ? "profitWarning" : "profitPositive"; }, this); 上面例子profitStatus屬性返回的字符串”profitWarning” 或 “profitPositive”會直接作為class設置到元素上，這就是動態class的css綁定。這個特性非常靈活強大，在某些需要需求場景下非常有用。 ### 綁定多個class css綁定可以同時綁定多個class，每個class之間用半角逗號隔開，示例代碼如下: //.w片段 <div bind-css="{ profitWarning: currentProfit.get() < 0, majorHighlight: isSevere }"> ### 綁定不符合標識符規則的class //.w片段 <div bind-css="{ my-class: someValue }">...</div> my-class不符合javascript標識符規則，導致綁定出錯。在這種情況下，可以在class用單引號引起即可，代碼如下： //.w片段 <div bind-css="{ 'my-class': someValue }">...</div> ### 在固定的class之后追加綁定class //.w片段 <a component="$UI/system/components/justep/button/button" class="btn" bind-css="{ 'btn-danger': currentProfit.get() < 0 }" label="button" xid="button1"> <i/> <span/> </a> 上面示例代碼標簽有固定的class ‘btn’，通過bind-css動態追加和移除’btn-danger’ class.