草監網路已從Blogger搬離至獨立網站https://gratch.tw/ ，將於3秒後自動跳轉
如果你會做網頁(我是指前端的部分)，那你一定知道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，就會對調囉！
本篇教學就到這邊，希望我能更快擠出時間寫下一篇教學(點頭)！
可能是我的程式基礎不好，
回覆刪除下面是我原來想要實現的效果
http://codepen.io/aforian/pen/OWLjqR?editors=1010
不知道有沒有更簡潔的實現方式可以指教？謝謝！
如果你已經實現你要的功能，我是覺得在初期把功能寫出來會比研究怎麼寫的精簡來的好，因為寫程式主要是為了未來維護或協作時可以快速入手，如果過度精簡反而會造成閱讀上的困難，所以我是覺得可以寫出來比寫的精簡重要多了。
回覆刪除如果真的說要建議的話：http://codepen.io/anon/pen/mRbpxd
我覺得你的h3的v-bind可以簡略成一個Object，這樣就可以不用寫這麼長，畢竟寫太長閱讀上也會有點困難。
感謝NOWILL用心編寫的教學文章，真的是可以快速上手~受益匪淺。
回覆刪除期待您的下一篇教學，另外附上7篇教學文章的練習範例 :)
http://codepen.io/anon/pen/wgQwLV
“寫”active:check
回覆刪除謝謝～
刪除感謝你的文章 膜拜ing 真的謝謝T T你寫得好好
回覆刪除謝謝您的誇獎n(_ _)n 您的留言就是我最好的回饋
刪除您好
回覆刪除感謝您的教學
對新手而言的確很好入門
能否多描述、比較一下當沒有使用VUE時，造成低可維護、再利用性的情形
感恩
感謝您的留言，有時間我會再針對這點詳加描述一下
刪除你好，無意間看到這個 blog 覺得你對於 vue 的教學寫得淺顯易懂，不知道還會不會有機會看到更多 vue 的文章呢？
回覆刪除WtituXlisdzu Eric Crossley https://wakelet.com/wake/1KnY0tDp-n5z5rLDd3NG_
回覆刪除thistnutcwortsu