本內容為系列內容，全部內容請看我的vue教程分類
前面在講到 v-bind的時候我們說到 vue是可以綁定樣式的，那么這里我們就簡單實踐一下
為什么要動態綁定樣式
來看這個效果，默認渲染選中的是藍色字體，這就是一個簡單的場景，包括還有些列表展示中，不同數據不同樣式，比如vip用戶的標識就不同，這就需要動態綁定樣式，懂了吧！
[外鏈圖片轉存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳(img-JusWgRQ3-1592911825014)(https://img.lookroot.cn/blog/202003/27/125540-195501.gif)]
vue動態綁定class
實現不同情況的頁面的不同效果展示，其實就是給這個節點添加一個不同的class樣式就行了，也就是動態綁定樣式
首先還是實例化一個vue,定義一個布爾值 isShow等於 false，還有一個showobj對象，這兩個屬性我們就用來在頁面中做不同情況的渲染展示
<script>
let vm = new Vue({
el: '#app',
data() {
return {
isShow: true,
showIndex: 0,
showObj: {
'color': true
}
}
},
})
</script>
然后定義兩個頁面內樣式，方便一會兒測試使用
<style>
.color {
color: red;
}
.font {
font-size: 48px;
}
</style>
然后我們在頁面中綁定第一個class樣式，還記得嗎 v-bind可以省略為 :,我們這里使用 :class給它綁定一個對象，對象里面是 color:true意思就是給這個節點綁定上 color這個class，如果為false，就不會綁定
<div :class="{color:true}">showObj1</div>
看下效果是ok的，字體是紅色的了
我們也可以使用在data中定義的屬性，這里我們就使用data里面的 isShow這個布爾值，也就是綁定了一個 true
<div :class="{color:isShow}">showObj1</div>
還可以綁定data中定義的對象 showObj
<div :class="showObj">showObj2</div>
常用的方式還可以綁定三元表達式，isShow為真的時候，就綁定一個 color否則綁定一個 font
<div :class="isShow?'color':'font'">showObj1</div>
還可以綁定多個class屬性，綁定數組就是了
<div :class="['font','color']">showObj3</div>
這個數組也可以分別進行判斷
<div :class="['font',{color:isShow}]">showObj4</div>
這里我們為了方便展示還可以定義一個按鈕，綁定一個點擊事件切換 isShow的布爾值
<button @click="isShow=!isShow">toggle</button>
我們來瀏覽器看看效果，可以吧！
可能大家還是有點不熟悉，那么我們就實現以下上面的嗶哩嗶哩那個效果
首先我們在data中定義一個，表明當前選中的是哪一行
showIndex: 0,
然后我們到頁面中定義一個列表，分別動態綁定一個 class 為active，綁定的條件就是這個 showIndex等於一個特定的數字，然后我們給每一行都綁定點擊事件，每次點擊的時候修改 showIndex等於這個特定的值，這樣點擊的時候當前行就能綁定上這個 class了
<ul>
<li :class="{active:showIndex==0}" @click="showIndex=0">回復我的</li>
<li :class="{active:showIndex==1}" @click="showIndex=1">@我的</li>
<li :class="{active:showIndex==2}" @click="showIndex=2">收到贊的</li>
</ul>
我們簡單寫下這個樣式，active選中行給它一個藍色
<style>
ul {
background-color: #dae5f5;
}
ul li {
height: 50px;
line-height: 50px;
}
ul li:hover {
cursor: pointer;
}
ul .active {
color: #5faee3;
}
</style>
來瀏覽器看看效果，可行吧！
vue動態綁定行內式
那么同樣的可以綁定class，也可以綁定行內式吧！
首先我們還是在 data中定義兩個屬性，方便測試
inColor: 'red',
styleObj: {
color: 'red',
fontSize: '48px'
}
第一種綁定方式，我們直接綁定一個對象，名稱是 color 值為 red，也就是給這個節點綁定了style="color: red;"
我們在綁定 syle的屬性名的時候要注意它是駝峰式命名的 比如 fontSize
<div :style="{color:'red'}">red</div>
第二種方式綁定多個屬性，第一個屬性的值是我們在data中定義的inColor屬性，第二個屬性就是上面第一種方式的使用，直接綁定一個值
<div :style="{color:inColor,fontSize:36+'px'}">red</div>
第三個方式，綁定data中定義的對象styleObj，這里定義了兩個style屬性
<div :style="styleObj">red</div>
現在我們來瀏覽器看看效果
然后你說這個有啥用？來我們來舉個例子，我們搞個循環出來，現在我要每一行的字體都比上一行大，怎么實現？
<div v-for="i in 10">{{i}}</div>
我們動態綁定 style，綁定一個fontsize字體大小，值就是每次循環的值乘以10
<div v-for="i in 10" :style="{fontSize:i*10+'px'}">{{i}}</div>
看看效果
