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

’