绑定class
为什么需要样式绑定呢?
因为有些样式我们希望能够动态展示
看下面的例子:
<template><div><p :class="{'active':modifyFlag}">class样式绑定</p></div>
</template><script>export default {name: "goodsTest",data() {return {modifyFlag: true,},}}
</script><style scoped>
.active{color: green;font-size: 20px;
}
</style>
绑定的时候可以绑定多个值:
<p :class="{'active':modifyFlag ,'view':viewFlag}">class样式绑定</p>
<template><div><p :class="{'active':modifyFlag ,'view':viewFlag}">class样式绑定</p></div>
</template><script>export default {name: "goodsTest",data() {return {modifyFlag: true,viewFlag:true,}},//计算属性computed: {viewTrueOrFalse() {return this.modifyFlag == true ? 'YES' : 'NO'}},methods: {}}
</script><style scoped>
.active{color: green;
}.view{font-size: 40px;}</style>对于多个对象的绑定,我们只需要将所需要要绑定的整合到一个对象之中即可:
例如:
‘
多个对象的绑定
’ allBind:{active:true,view:true},....样式.....<style scoped>
.active{color: green;
}.view{font-size: 40px;}</style>
除了绑定对象跟对象的引用,还可以绑定数组:
<p :class="[arrayActive,arrayView]" >多个对象的绑定2</p>
省略
data() {return {arrayActive:'active',arrayView:'view',
省略.....
可以使用三元运算符
<p :class="[arrayActive=='active'?'active':'']" >多个对象的绑定3</p>
在绑定时 数组跟对象嵌套时,只能对象嵌套在数组里面,而不能反过来;
<p :class="[arrayActive=='active'?'active':'',{'view':viewFlag}]" >多个对象的绑定4</p>
同理绑定Style时跟对象的用法一致
<p :style="{color:bindColor ,fontSize:fontSize }">绑定style</p><p :style="bindStyle">绑定style2</p>
............................分割岛....................................<script>export default {name: "goodsTest",data() {return {bindColor:'red',fontSize:'30px',bindStyle:{color:"red",fontSize:"40px"},....省略...
也可以绑定数组
`
绑定style3
’
