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
3. :class可以绑定数据中的对象
<div class="static" :class="classobj">xxx</div>
export default {
data(){
return{
//可以直接绑定一个对象,对象里面有多个样式
classobj:{
active:true,
error:false
}
}
}
}
4. 三元表达式
//简单用法
<div class="coupon-img" :class="[item.ticket_type==1?'thirty-yuan':'fifty-yuan']">
//复合用法
<template>
<div id="app">
<div class="static" :class="[isActive?activeCls:errorCls,baseClass]">xxx</div>
</div>
</template>
<script>
export default {
data(){
//当isActive值为true时,会执行activeCls对应的样式 active
//并且执行baseClass对应的样式 baseclass
//当isActive值为false时,会执行errorCls对应的样式 error
//并且执行baseClass对应的样式 baseclass
return{
isActive:true,
activeCls:'active',
errorCls:'error',
baseClass:'baseclass'
}
}
}
</script>
<style scoped>
.active{
background: red;
}
.error{
color: white;
}
.baseclass{
text-align: center;
}
</style>
5.v-bind:class设置一个数组
使用了数组就要在data中指定重命名
<div class="static" :class="[activeCls,errorCls]">xxx</div>
export default {
data(){
return{
//相当于样式active样式在div中重命名 为activeCls
activeCls:'active',
errorCls:'error'
}
}
}
<style>
.active{xxx}
.error{xxx}
</style>
6.数组语法中使用对象语法
<template>
<div id="app">
<div class="static" :class="[{'active':isActive},baseClass]">xxx</div>
</div>
</template>
<script>
export default {
data(){
//因为isActive值为true,样式为active 和 baseClass对应的 baseclass
//所以样式为 active、baseclass
return{
isActive:true,
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对应的样式
8. 绑定内联样式
<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>