最新 New

[公告]草監網路更改網址至gratch.tw

[教學] Vue js快速上手 (七) 改變樣式的魔術棒 v-bind

草監網路已從Blogger搬離至獨立網站https://gratch.tw/ ,將於3秒後自動跳轉
離上一篇的for loop又隔了一段時間(擦汗),除了在思考這邊要說什麼以外,也是真的年底到了,忙了一堆不知道在忙什麼的事,不過我一直都沒有忘記我的教學還沒寫完......我想,應該也是我覺得我太忙了,所以我才每年都沒參加鐵人賽吧(搖頭)。

如果你會做網頁(我是指前端的部分),那你一定知道HTML一定要搭配一個叫CSS的東西才能讓版面變漂亮、變好看,問題是我如果我用了vue.js,我要怎麼改變我的配色?比方說要提醒的東西就要上紅色、警告的東西就要上黃色、只是一般普通訊息就要上綠色的這種紅綠燈訊息,我是要怎樣才能在同一個按鈕或同一個Div內透過vue.js的運算就做到更換的效果?

這個時候我就不得不來說一下v-bind這個東西了,v-bind是vue.js裡負責改變配色、大小等等所用的屬性,也就是說v-bind就是針對css而存在的屬性,而這樣的屬性會有什麼樣的屬性值呢?再講屬性值之前,我們要來認識一下v-bind的副屬性,也就是v-bind:style與v-bind:class!

如果你對css很熟,你一定會知道所謂的行內樣式style="OOXX",還有id與class樣式,當然由於id有不重複性,為了讓css可以更有效率,現在都會提倡大家用class,也因為此,所以只有v-bind:class,這個部分是比較特別的,可能稍微需要用一下大腦的記憶體。

首先我們先來看看v-bind:style怎麼用,其實用法還挺簡單的,屬性值裡面就直接寫行內樣式,但是樣式的數值,比方說顏色或文字大小,我們就可以設定在vue的data,這樣我們就可以直接帶進畫面,範例如下:
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>0 Hello World</title>
    </head>
    <body>

        <div id="app">
            <div v-bind:style="{ color: myColor, fontSize: myFontSize + 'px' }">123</div>
        </div>

        <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.1.4/vue.js"></script>
        <script>
            new Vue({
                el:'#app',
                data:{
                   myColor: 'red',
                   myFontSize: 30
                }
            });
        </script>
    </body>
</html>

如果你有跟著前面的教學一路學過來,我相信到這裡一定難不倒你,因為只是把data裡面的變數直接帶進去而已。當然我們現在我們在coding的時候一定要講求維護性,最好是不要改HTML只改CSS或是不要改HTML或CSS我們直接改js,所以我們換個比較好維護的寫法:
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>0 Hello World</title>
    </head>
    <body>

        <div id="app">
            <div v-bind:style="myStyle">123</div>
        </div>

        <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.1.4/vue.js"></script>
        <script>
            new Vue({
                el:'#app',
                data:{
                   myStyle: {
                    color: 'red',
                    fontSize: '30px'
                  }
                }
            });
        </script>
    </body>
</html>

是的,我們只要在v-bind:style裡面直接設定一個物件名稱,然後就可以在vue的data裡面直接透過物件去設定我們要屬性值,在這裡我們輸入的css是文字變紅並且文字變大成30px,簡單、明瞭、好維護!但是只能滿足我們基本需求,而且現在的網頁很少會用行內樣式啊!所以我們就來看看v-bind:class吧!

v-bind:class其實用法與寫法上當然就比剛剛的v-bind:style簡單,畢竟css部分我們都可以另外設定在css區域,日後要維護也是很容易,只要改css就好,不像剛剛好像把css混在js裡,當然看起來就會簡單很多,我們來看看範例:
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>0 Hello World</title>
        <style>
          .active{
            color:red;
            font-size: 30px;
          }
        </style>
    </head>
    <body>

        <div id="app">
            <div v-bind:class="{ active: myCheck }">123</div>
        </div>

        <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.1.4/vue.js"></script>
        <script>
            new Vue({
                el:'#app',
                data:{
                   myCheck: true
                }
            });
        </script>
    </body>
</html>

是的!在這個範例裡面我們很明顯的可以看到,使用v-bind:class,我們只要判斷這個class是不是要啟用就可以了,像我大括號裡面是寫active:check,其中active就是我們的class名稱,而myCheck則是我設定的變數名稱,我在vue的data裡面設定的ture,意思就是啟用這個class,所以當我們打開頁面的時候,你就會看到123這行div被套上了一個叫active的class。

咦?既然可以設定ture,那是不是也有false?那既然有ture跟false,那我是不是可以設定很多個class??當然可以!你可以設定一連串的class名稱都沒有問題,因為重點在於要啟用哪一個class對吧? 那要怎麼設定很多個class?我們簡單範例如下:
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>0 Hello World</title>
        <style>
          .active{
            color:red;
            font-size: 30px;
          }
          .normal{
            color:green;
            font-size: 30px;
          }
        </style>
    </head>
    <body>

        <div id="app">
            <div v-bind:class="{ active: myCheck , normal:myCheck2 }">123</div>
        </div>

        <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.1.4/vue.js"></script>
        <script>
            new Vue({
                el:'#app',
                data:{
                   myCheck: false,
                   myCheck2: true
                }
            });
        </script>
    </body>
</html>

看到範例有沒有覺得超簡單?只要在大括號裡面透過逗點連接,你就可以繼續輸入下一組class名稱跟判斷用的變數了,有沒有超簡單?你只要把myCheck與myCheck2的ture跟false對調,套在123這個div的class,就會對調囉!

本篇教學就到這邊,希望我能更快擠出時間寫下一篇教學(點頭)!

留言

  1. 可能是我的程式基礎不好,
    下面是我原來想要實現的效果
    http://codepen.io/aforian/pen/OWLjqR?editors=1010
    不知道有沒有更簡潔的實現方式可以指教?謝謝!

    回覆刪除
  2. 如果你已經實現你要的功能,我是覺得在初期把功能寫出來會比研究怎麼寫的精簡來的好,因為寫程式主要是為了未來維護或協作時可以快速入手,如果過度精簡反而會造成閱讀上的困難,所以我是覺得可以寫出來比寫的精簡重要多了。
    如果真的說要建議的話:http://codepen.io/anon/pen/mRbpxd
    我覺得你的h3的v-bind可以簡略成一個Object,這樣就可以不用寫這麼長,畢竟寫太長閱讀上也會有點困難。

    回覆刪除
  3. 感謝NOWILL用心編寫的教學文章,真的是可以快速上手~受益匪淺。
    期待您的下一篇教學,另外附上7篇教學文章的練習範例 :)
    http://codepen.io/anon/pen/wgQwLV

    回覆刪除
  4. “寫”active:check

    回覆刪除
  5. 感謝你的文章 膜拜ing 真的謝謝T T你寫得好好

    回覆刪除
    回覆
    1. 謝謝您的誇獎n(_ _)n 您的留言就是我最好的回饋

      刪除
  6. 您好
    感謝您的教學
    對新手而言的確很好入門
    能否多描述、比較一下當沒有使用VUE時,造成低可維護、再利用性的情形
    感恩

    回覆刪除
    回覆
    1. 感謝您的留言,有時間我會再針對這點詳加描述一下

      刪除
  7. 你好,無意間看到這個 blog 覺得你對於 vue 的教學寫得淺顯易懂,不知道還會不會有機會看到更多 vue 的文章呢?

    回覆刪除

張貼留言