wex5作為網頁開發利器，在前台UI數據交互設計中大量使用了綁定技術，即官方視頻教學中也提到了KO,實質是數據綁定與追蹤。在前台組件的屬性中，為我們提供了兩個重要的樣式綁定屬性，bind-css和bind-style.這兩個屬性都能動態的為組件或元素綁定樣式，那么含義和用法有什么異同呢？
先來看兩個例子：
一..bind-css案例：
組件屬性設置:
css樣式對像：
bind-css含義： 為組件或元素綁定樣式對像，注意是樣式對像，所以在css樣式文件中要創建樣式對像；
bind-css格式：1，json形式，用大括號；
2，左側為樣式對像名稱，用單引號（絕對不能用雙引號）；
3，右側為執行樣式對像條件，返回值為true或false,為true條件成立，執行該樣式
4，右側綁定方法可以是數據組件，也可以是可觀察對像，也可以是變量
bind-css缺陷：根據判斷條件，為元素動態綁定並執行樣式對像。把思維擴展一下，我如果想根據某個值，為元素動態的執行某個樣式屬性如何實現呢?比如，我得到一個5，把5給了樣式中的font-size，動態來改變樣式中的字體大小怎么實現呢？或者根據拾色器動態得到一個color值，如何動態改變樣式中的color值呢？很多朋友會說，你用css表達式獲取js對像值，來動態執行就可以了。是的，這種方法可行，效果如下：
這種方法經測試，確實可行，帶來了更復雜的問題:
一.是瀏覽器的兼容問題，可能在某些瀏覽器上執行不了;
二 是性能能問題，在css對像中執行了expression表達式，一個屬性還好，如果有100個多樣式動態執行呢？有人會說不可能有那么多屬性，舉個反例，我在字幕設計界面，文字所有屬性都要動態改變並監控樣式，顏色，字本，大小，寬高，縮進，行高，背景，等等，估計還沒開發，就死到頁面了。
顯然，bind-css不能實現我的效果，那么，wex5為我們提供了另外一個屬性，bind-sytle,彌補了動態樣式綁定的不足。
二.bind-style案例：
先看效果：
我的意圖，通過下拉字體大小選擇框，選出字號大小，讓span里的文字動態並實時改變相應的font-size .樣式綁定方法如下：
圖中color和size,為變量，其實是引入了可觀察變量，引入方法如下：
bind-style含義：根據值，動態為元素執行樣式屬性；
bind-style格式：1.json形式，用大括號，跟bind-css寫法一樣。
2.屬性可以多個連用，中間用逗號分格。
3. 左側為屬性鍵，必須用單引號標注（絕對不能用雙引號，跟bind-css語法一樣）。
4.右側為屬性值，可以是data中取出的值，也可以是固定值。如何想用變量，那么變量要引入可觀察對像。
5.可觀察對像的意義，其實就是將一個變量賦於了綁定屬性，供其它組件或元素進行綁定，類似於data綁定。綁定之后，可觀察對像中的值可以通過綁定跟蹤的方式，將變量中的值動態傳輸給綁定對像。上例中，color和size中的值動態傳輸給了span的color和size值。
6.可觀察對像取值方法：XXX.get();
通過以上兩個例子分析，可以得出：
1.bind-css,是綁定樣式對像,而bind-style才是綁定樣式。
2.bind-css需要預先有css對像，而fbind-style可以動態執行，執行方法更靈活，更利於UI設計。
相關視頻制作完成，上傳優酷。教學app制作中。我是邯鄲戲曲開發，tel：15175073123,qq:1017945251
掃描二維碼，看高清教學視頻。