绑定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

’