wex5 教程 之 圖文講解 bind-css和bind-sytle的異同

 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

 

 

 掃描二維碼，看高清教學視頻。