作者 ： 混元霹靂手 - Ziksang
在我即將在分享的專題裡我現發一個問題，原本對於class和style的繫結我不想分享的，我覺得沒多大意義，但是我錯了，你別看一個小小的class和style繫結，用的好和用的差區別很大，特別在一些元件中的樣式提取分離中很重要，在自己的頁面邏輯，如何針對不同情況的樣式動態改變去選擇不同的：class寫法，確保語意化強，邏輯清晰，我就用一些demo來給大家展示，老司機可以跳過，用最簡介的demo把所有方式做的一清二楚
接下來還是按著我們約定的來
1.本文分享 計算屬性
2.程式碼執行vue-cli 2.1版本
3.元件程式碼都在components資料夾裡
4.主程式碼邏輯都在 App.vue資料夾裡
我什麼都不要我只要
贊
我們先針對這個例子講一個demo
物件語法
我們可以傳給 v-bind:class 一個物件，以動態地切換 class 。
:class裡是一個物件的時候
<div v-bind:class="{ active: isActive }"></div>複製程式碼active : 代表一個class名
isActive : 這個用來返回true or false或者一種表示式判斷返回的true or false
我也相信大家做過這種需求，現在有十個問題給我們，讓我們去選擇，當選擇到的部分把們把他標紅，這那種方法最簡便呢。那種方法最好呢？如果問題是後臺手動建創可配的，那我們又要如何去做呢？這裡會給大家普及一個知識點，那就是$set用法this.$set(object,key,value)
意思就是在物件中設定一個物件裡的屬性，沒有就新增，有就修改
我們先針對這個例子講一個demo
App.vue
<template>
<ul>
<li v-for='(item,index) in message' @click='item.isred = !item.isred' :class='{ red : item.isred }'>{{item.name}}</li>
</ul>
</template>
<script>
export default {
created () {
let data = [
{name : '混無霹靂手帥不？'},
{name : '混無霹靂手是老司機不？'},
{name : '混無霹靂手分享的好不好？'}
]
for(let i of data){
this.$set(i,"isred",false)
}
this.message = data
},
data () {
return {
message : []
}
}
}
</script>
<style>
.red{
background:red;
}
</style>複製程式碼我們當作data是我們後臺給來的資料，但是有點很讓人頭疼，後臺一般只會給你一些資料只是關於問題的，不會給你關於顏色高亮標識的資料，那怎麼辦，那我們用this.$set這個方法對每個物件里加一個isred屬性，值都為false，因為都沒有選擇，以上的寫方我個人看來是比較最簡便的，我覺得一些點選事件能簡便寫在tepmplate裡，我們就寫在template裡
你也可以直接繫結資料裡的一個物件：
當我們點選要根據需求改變更多的樣式，更多的class
如果我們都放在：class裡面我覺得不清晰，此時的語意化就不明顯了
<div v-bind:class="classObject"></div>
data: {
classObject: {
active: true,
'text-danger': false
}
}複製程式碼<div class="static"
v-bind:class="{ active: isActive, 'text-danger': hasError }">
</div>
data: {
isActive: true,
hasError: false
}複製程式碼以上兩者對比，我們很明示的看出來，第一個書寫出來更加簡便程式碼量少，語意化更加有針對性
計算屬性改變class樣式
如果要通過複雜的邏輯，現在又有一個demo場景，現在有一個按扭，必須把三個問題全選我才可以提交，按鈕色彩高亮，如果我們就是單單用javascript表示式來進行判斷，行不通，那這時候選用computed最好
APP.vue
<template>
<div>
<ul>
<li v-for='(item,index) in message' @click='item.isred = !item.isred' :class='{ red : item.isred }'>{{item.name}}</li>
</ul>
<button :class='allchoose'>必須全選才可以提交</button>
</div>
</template>
<script>
export default {
created () {
let data = [
{name : '混無霹靂手帥不？'},
{name : '混無霹靂手是老司機不？'},
{name : '混無霹靂手分享的好不好？'}
]
for(let i of data){
this.$set(i,"isred",false)
}
this.message = data
},
data () {
return {
message : []
}
},
computed : {
allchoose () {
for(let i of this.message){
if( i.isred == false){
return {yellow : false}
}
}
return {yellow : true}
}
}
}
</script>
<style>
.red{
background:red;
}
button{
background:gray;
}
.yellow {
background:yellow
}
</style>複製程式碼在計算屬性這個章中我講過compunted主要用於維護返一個返回值，通過對每個物件裡isred進行判斷，一但任何一個isred有變動，computed都會從新計劃，再進行返回，三個全選中則黃色高亮，如果任一一個沒選則去除高亮，在computed維護的是一個返回物件
class陣列寫法
在陣列寫法中，我們可以寫兩種寫法，第一個字串寫法第二個屬性值寫法，
1.寫法方便之處如果用陣列三元表示式，肯定是字串寫法比較清楚簡單
2.屬性值寫法是根據不同的邏輯需求改變而改變，比較有適用場景
兩種寫法也可以放在一起，給一個demo
<template>
<div>
<ul>
<li v-for='(item,index) in message' @click='item.isred = !item.isred' :class="['red',sizeClass]">{{item.name}}</li>
</ul>
</div>
</template>
<script>
export default {
created () {
let data = [
{name : '混無霹靂手帥不？'},
{name : '混無霹靂手是老司機不？'},
{name : '混無霹靂手分享的好不好？'}
]
for(let i of data){
this.$set(i,"isred",false)
}
this.message = data
},
data () {
return {
message : [],
sizeClass : 'size'
}
}
}
</script>
<style>
.red{
background:red;
}
.size {
font-size:40px;
}
</style>複製程式碼三元表示式寫法，這個寫法，這個寫起來很爽，我們針對前面第一個列子我們再換一種方法式寫看看如何在template裡來進行語議話的寫法
<template>
<div>
<ul>
<li v-for='(item,index) in message' @click='item.isred = !item.isred' :class="[item.isred == true?'red':'green']">{{item.name}}</li>
</ul>
</div>
</template>
<script>
export default {
created () {
let data = [
{name : '混無霹靂手帥不？'},
{name : '混無霹靂手是老司機不？'},
{name : '混無霹靂手分享的好不好？'}
]
for(let i of data){
this.$set(i,"isred",false)
}
this.message = data
},
data () {
return {
message : [],
}
}
}
</script>
<style>
.red{
background:red;
}
.size {
font-size:40px;
}
</style>複製程式碼第一種物件寫和三元表示式寫法各有各的好處，看大家喜歡了，但三元表示式寫法更貼近語意化吧
元件樣式寫法
在如果我們在元件裡雖然定義好樣式，但是如果在元件上再進行一層樣式新增或者用語法繫結都不會覆蓋前先前的樣式，這裡我就不給demo了，我覺得官網的這個demo還不錯，我覺得不好的demo我會給大家舉一些列子出來
當你在一個定製的元件上用到 class 屬性的時候，這些類將被新增到根元素上面，這個元素上已經存在的類不會被覆蓋。
例如，如果你宣告瞭這個元件:
Vue.component('my-component', {
template: '<p class="foo bar">Hi</p>'
})複製程式碼然後在使用它的時候新增一些 class：
<my-component class="baz boo"></my-component>複製程式碼HTML 最終將被渲染成為:<p class="foo bar baz boo">Hi</p>
同樣的適用於繫結 HTML class :<my-component v-bind:class="{ active: isActive }"></my-component>
當 isActive 為 true 的時候，HTML 將被渲染成為:<p class="foo bar active">Hi</p>
style寫法
對於style寫法用於那裡比較好，我個人認為用法很多，如果只是一些小icon或者小spinner集合出來的簡單元件，只是向外暴露的是不同的樣式改變，如果基於這個樣式我們覺得配置的細點，可以用於style寫法
具體如何用，你們可以去看一下我寫的spinner元件，裡面就用到用style去傳遞資料來細化選擇的樣式
juejin.im/post/58e3be…
對於學vue的朋友,想真真的元件化自己的一個網站，必須打好vue api的基礎，這個是必然的也是我分享強調的，後繼無論你做專案也好，還是寫元件也好，會很爽，很受益，關於vue我還是會停進行分享
渣渣前端開發工程師，喜歡鑽研，熱愛分享和講解教學， 微信 zzx1994428 QQ494755899
支援我繼續創作和感到有收穫的話，請向我打賞點吧
如果轉載請標註出自@混元霹靂手ziksang