本內(nèi)容為系列內(nèi)容桩砰，全部?jī)?nèi)容請(qǐng)看我的vue教程分類
前面在講到 v-bind的時(shí)候我們說(shuō)到 vue是可以綁定樣式的祭衩，那么這里我們就簡(jiǎn)單實(shí)踐一下
為什么要?jiǎng)討B(tài)綁定樣式
來(lái)看這個(gè)效果，默認(rèn)渲染選中的是藍(lán)色字體，這就是一個(gè)簡(jiǎn)單的場(chǎng)景，包括還有些列表展示中，不同數(shù)據(jù)不同樣式辫红，比如vip用戶的標(biāo)識(shí)就不同，這就需要?jiǎng)討B(tài)綁定樣式祝辣，懂了吧贴妻！
[外鏈圖片轉(zhuǎn)存失敗,源站可能有防盜鏈機(jī)制,建議將圖片保存下來(lái)直接上傳(img-JusWgRQ3-1592911825014)(https://img.lookroot.cn/blog/202003/27/125540-195501.gif)]
vue動(dòng)態(tài)綁定class
實(shí)現(xiàn)不同情況的頁(yè)面的不同效果展示，其實(shí)就是給這個(gè)節(jié)點(diǎn)添加一個(gè)不同的class樣式就行了蝙斜，也就是動(dòng)態(tài)綁定樣式
首先還是實(shí)例化一個(gè)vue,定義一個(gè)布爾值 isShow等于 false名惩，還有一個(gè)showobj對(duì)象，這兩個(gè)屬性我們就用來(lái)在頁(yè)面中做不同情況的渲染展示
<script>
let vm = new Vue({
el: '#app',
data() {
return {
isShow: true,
showIndex: 0,
showObj: {
'color': true
}
}
},
})
</script>
然后定義兩個(gè)頁(yè)面內(nèi)樣式孕荠，方便一會(huì)兒測(cè)試使用
<style>
.color {
color: red;
}
.font {
font-size: 48px;
}
</style>
然后我們?cè)陧?yè)面中綁定第一個(gè)class樣式娩鹉，還記得嗎 v-bind可以省略為 :,我們這里使用 :class給它綁定一個(gè)對(duì)象，對(duì)象里面是 color:true意思就是給這個(gè)節(jié)點(diǎn)綁定上 color這個(gè)class稚伍，如果為false弯予，就不會(huì)綁定
<div :class="{color:true}">showObj1</div>
看下效果是ok的，字體是紅色的了
我們也可以使用在data中定義的屬性个曙，這里我們就使用data里面的 isShow這個(gè)布爾值锈嫩，也就是綁定了一個(gè) true
<div :class="{color:isShow}">showObj1</div>
還可以綁定data中定義的對(duì)象 showObj
<div :class="showObj">showObj2</div>
常用的方式還可以綁定三元表達(dá)式，isShow為真的時(shí)候垦搬，就綁定一個(gè) color否則綁定一個(gè) font
<div :class="isShow?'color':'font'">showObj1</div>
還可以綁定多個(gè)class屬性祠挫，綁定數(shù)組就是了
<div :class="['font','color']">showObj3</div>
這個(gè)數(shù)組也可以分別進(jìn)行判斷
<div :class="['font',{color:isShow}]">showObj4</div>
這里我們?yōu)榱朔奖阏故具€可以定義一個(gè)按鈕，綁定一個(gè)點(diǎn)擊事件切換 isShow的布爾值
<button @click="isShow=!isShow">toggle</button>
我們來(lái)瀏覽器看看效果悼沿，可以吧！
可能大家還是有點(diǎn)不熟悉骚灸，那么我們就實(shí)現(xiàn)以下上面的嗶哩嗶哩那個(gè)效果
首先我們?cè)?strong>data中定義一個(gè)糟趾，表明當(dāng)前選中的是哪一行
showIndex: 0,
然后我們到頁(yè)面中定義一個(gè)列表，分別動(dòng)態(tài)綁定一個(gè) class 為active，綁定的條件就是這個(gè) showIndex等于一個(gè)特定的數(shù)字义郑，然后我們給每一行都綁定點(diǎn)擊事件蝶柿，每次點(diǎn)擊的時(shí)候修改 showIndex等于這個(gè)特定的值，這樣點(diǎn)擊的時(shí)候當(dāng)前行就能綁定上這個(gè) class了
<ul>
<li :class="{active:showIndex==0}" @click="showIndex=0">回復(fù)我的</li>
<li :class="{active:showIndex==1}" @click="showIndex=1">@我的</li>
<li :class="{active:showIndex==2}" @click="showIndex=2">收到贊的</li>
</ul>
我們簡(jiǎn)單寫(xiě)下這個(gè)樣式非驮，active選中行給它一個(gè)藍(lán)色
<style>
ul {
background-color: #dae5f5;
}
ul li {
height: 50px;
line-height: 50px;
}
ul li:hover {
cursor: pointer;
}
ul .active {
color: #5faee3;
}
</style>
來(lái)瀏覽器看看效果交汤，可行吧！
vue動(dòng)態(tài)綁定行內(nèi)式
那么同樣的可以綁定class劫笙，也可以綁定行內(nèi)式吧芙扎！
首先我們還是在 data中定義兩個(gè)屬性，方便測(cè)試
inColor: 'red',
styleObj: {
color: 'red',
fontSize: '48px'
}
第一種綁定方式填大，我們直接綁定一個(gè)對(duì)象戒洼，名稱是 color 值為 red，也就是給這個(gè)節(jié)點(diǎn)綁定了style="color: red;"
我們?cè)诮壎?syle的屬性名的時(shí)候要注意它是駝峰式命名的 比如 fontSize
<div :style="{color:'red'}">red</div>
第二種方式綁定多個(gè)屬性允华，第一個(gè)屬性的值是我們?cè)?strong>data中定義的inColor屬性圈浇，第二個(gè)屬性就是上面第一種方式的使用，直接綁定一個(gè)值
<div :style="{color:inColor,fontSize:36+'px'}">red</div>
第三個(gè)方式靴寂，綁定data中定義的對(duì)象styleObj磷蜀，這里定義了兩個(gè)style屬性
<div :style="styleObj">red</div>
現(xiàn)在我們來(lái)瀏覽器看看效果
然后你說(shuō)這個(gè)有啥用？來(lái)我們來(lái)舉個(gè)例子百炬，我們搞個(gè)循環(huán)出來(lái)褐隆，現(xiàn)在我要每一行的字體都比上一行大，怎么實(shí)現(xiàn)收壕？
<div v-for="i in 10">{{i}}</div>
我們動(dòng)態(tài)綁定 style妓灌，綁定一個(gè)fontsize字體大小，值就是每次循環(huán)的值乘以10
<div v-for="i in 10" :style="{fontSize:i*10+'px'}">{{i}}</div>
看看效果
