[后端卷前端2]

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