1、class绑定
用法一::class可以与class同时使用
<div class="static" :class="{'nav':flag}"></div>
用法二:
<div :class="classObject"></div>
或者如果不想写死Bool的值,可以定义在computed中
<div :class="classObject1"></div>
用法三:数组的写法
可以使用三目表达式
<div :class="['nav',flag?'header':'footer']"></div>
export default{
data(){
return{
flag:true,
classObject:{
'header':true,
'footer':true
}
}
},
computed{
classObject1(){
return {
'nav-bar':this.flag
}
}
}
}
css类
.nav{}
.header{}
.footer{}
.nav-bar{}
2、style绑定
用法一:property 名可以用驼峰式 (camelCase) 或短横线分隔 (kebab-case,记得用引号括起来) 来命名
<div :style="backgroundColor:myColor"></div>
用法二:直接绑定一个对象
<div :style="styleObject"></div>
用法三:数组写法,同样可以使用三目运算符
<div :style="[bgStyle,shadowStyle]"></div>
export default{
data(){
return{
myColor:'red',
styleObject:{
color:'red',
fontSize:'12px'
},
bgStyle:{
backgroundColor:'red'
},
shadowStyle:{
boxShadow: "5px 5px 5px 5px #456"
}
}
}
}