vue 綁定樣式
對象語法
1.v-bind:class設置一個對象,動態切換class
<div :class="{'active':isActive}">xxx</div>
樣式是否起作用,根據isActive的布爾值是否爲true
2.:class可以和class共存
<div class="static" :class="{'active':isActive,'error':isError}">xxx</div>
當isActive值爲true,isError爲false,樣式爲 static和isActive。
當isActive值爲false,isError爲true,樣式爲 static和isError。
當isActive值爲true,isError爲true ,樣式爲 static和isActive、isError
- :class可以綁定數據中的對象
<div class="static" :class="classobj">xxx</div>
export default {
data(){
return{
classobj:{ //可以直接綁定一個對象,對象裏面有多個樣式
active:true,
error:false
}
}
}
}
數組語法
4.v-bind:class設置一個數組
使用了數組就要在data中指定重命名
<div class="static" :class="[activeCls,errorCls]">xxx</div>
export default {
data(){
return{
activeCls:'active', //相當於樣式active樣式在div中重命名 爲activeCls
errorCls:'error'
}
}
}
<style>
.active{xxx}
.error{xxx}
</style>
5.三元表達式
<template>
<div id="app">
<div class="static" :class="[isActive?activeCls:errorCls,baseClass]">xxx</div>
</div>
</template>
<script>
export default {
data(){
return{
isActive:true,
activeCls:'active', //當isActive值爲true時,會執行activeCls對應的樣式 active 並且執行baseClass對應的樣式 baseclass
errorCls:'error', //當isActive值爲false時,會執行errorCls對應的樣式 error 並且執行baseClass對應的樣式 baseclass
baseClass:'baseclass'
}
}
}
</script>
<style scoped>
.active{
background: red;
}
.error{
color: white;
}
.baseclass{
text-align: center;
}
</style>
三元表達式
<div class="coupon-img" :class="[item.ticket_type==1?'thirty-yuan':'fifty-yuan']">
6.數組語法中使用對象語法
<template>
<div id="app">
<div class="static" :class="[{'active':isActive},baseClass]">xxx</div>
</div>
</template>
<script>
export default {
data(){
return{
isActive:true, //因爲isActive值爲true,樣式爲active 和 baseClass對應的 baseclass 所以樣式爲 active、baseclass
activeCls:'active',
baseClass:'baseclass'
}
}
}
</script>
<style scoped>
.active{
background: red;
}
.baseclass{
text-align: center;
}
</style>
7.定義一個數組通過不同索引值獲取不同樣式
<div class="icon" :class="classMap[support.type]"></div>
created () {
this.classMap = ["decrease", "discount", "guarantee", "invoice", "special"]
},
根據support.type的數組變化,索引到classMap對應的樣式
綁定內聯樣式
<div id="app">
<div :style="{color:cl,background:bk}">你好嗎?</div></div>
<script>
new Vue({
el:'#app',
data:{
cl:'red',
bk:'yellow'
}
})
</script>
直接綁定到一個樣式對象,讓模板更清晰:
<div id="app">
<div :style="testObj">你好嗎?</div>
</div>
<script>
new Vue({
el:'#app',
data:{
testObj:{
color:red;
background:yellow;
}
}
})
</script>