Vue.js樣式繫結
樣式繫結
class和style時html元素的屬性，可以使用v-bind來進行樣式的yi繫結，以設定樣式。
v-bind在繫結class和style時，Vue專門增強了它。結果型別不僅可以時字串，還可以是物件和陣列。
class屬性繫結
1：基本使用：
<style>
.static{...}
.class1{...}
//最好不使用中劃線
//.class2-abc{...}
.class2_abc{...}
</style>
<div id="app">
<div v-bind:class="{ class1: isActive1 }"></div>
</div>
<script>
new Vue({
el: '#app',
data: {
isActive1: true,
//注意，如果data中使用中劃線的話，需要加單引號。否則出錯。而且，在v-bind中使用時，也需要加單引號。加上單引號又無法識別資料，預設為true。
//所以，儘量不要在data中使用中劃線。
//下劃線沒問題。
//is-active2:true
is_active2:true
}
});
</script>
以上可以根據isACtive的值，動態判斷來進行class樣式的繫結。
提示：為了避免不必要的問題，data中和style中的class，最好不要用中劃線。
2：也可以繫結多個
<div id="app">
<div class="static" v-bind:class="{class1:isActive, class2_abc:is_active2}"></div>
</div>
這裡，會把v-bind動態繫結的class合併到前面的class中。
3：使用物件
<div id="app">
<div v-bind="classObject"></div>
</div>
<script>
new Vue({
el:'#app',
data:{
classObject:{
class1:true,
class2_abc:true
}
}
});
</script>
這裡，v-bind中直接使用物件進行繫結。與前面不同的時，物件中的鍵應該和style中定義的class樣式名對應。雖然可以使用中劃線，用引號括起來。但是同樣不建議。
其實很好理解，把v-bind中的物件直接替換為{class1:true,class2_abc:true}，這和前面兩個是相同的。
4：使用陣列
<div id="app">
<div v-bind="[classArr1,classArr2]"></div>
</div>
<script>
new Vue({
el:'#app',
data:{
classArr1:'class1',
classArr2:'class2_abc'
}
});
</script>
這裡，v-bid中使用陣列進行繫結。可以理解為將data中的屬性值替換到了class中。
5：使用計算屬性
這是強大且常用的方式。
<div id="app">
<div v-bind="classObject"></div>
</div>
<script>
new Vue({
el:'#app',
data:{
isActive:true,
error:null
},
computed:{
classObject:function(){
return{
class1: this.isActive && !this.error,
class2_abc: !this.error && this.error == null
}
}
}
});
</script>
用法就是這樣，可以藉助計算屬性做一些複雜的邏輯判斷等等。
style屬性繫結
1：直接設定樣式：
<div id="app">
<div v-bind:style="{color: activeColor, fontSize: fontSize + 'px'}">vue學習</div>
</div>
<script>
new Vue({
el:'#app',
data:{
activeColor:green,
fontSize:50
}
})
</srcipt>
使用清晰明瞭。需要注意的就是v-bind中屬性名和css中樣式的對應。如fontSize 對應font-size。
2：也可以直接使用物件
<div id="app">
<div v-bind:style="styleObject">vue學習</div>
</div>
<script>
new Vue({
el:'#app',
data:{
styleObject:{
color:'green',
fontSize:'30px'
}
}
});
</script>
與直接使用類似，只是要注意物件的屬性和css中的樣式對應。
3：同樣可以使用陣列
<div id="app">
<div v-bind:style="[styleArr1,styleArr2]">vue學習</div>
</div>
<script>
new Vue({
el:'#app',
data:{
styleArr1:{
color:'green',
fontSize:'30px'
},
styleArr2:{
fontSize:'bold'
}
}
});
</script>