P5. vue3 Class 与 Style 绑定

操作元素的 class 列表和内联样式是数据绑定的一个常见需求。因为它们都是 attribute，所以我们可以用 v-bind 处理它们：只需要通过表达式计算出字符串结果即可。不过，字符串拼接麻烦且易错。因此，在将 v-bind 用于 class 和 style 时，Vue.js 做了专门的增强。表达式结果的类型除了字符串之外，还可以是对象或数组。

对象语法

<script>
export default {
  data() {
    return {
      test57: 'hellokugou',
      isActive: true
    };
  },
};

</script>


<template>
  <!--first 放置字符 -->
  <div>
    <p class="active">{{ test57 }}</p>
    <!--second 放置对象 -->
    <p :class="{active:isActive}"> hello </p>
    <button @click="isActive=!isActive">change_active</button>

  </div>

</template>


<style>
.active{
  font-size: 80px;
  color: blue;
}

</style>

对象

<script>
export default {
  data() {
    return {
      test57: 'hellokugou',
      isActive: true,
      error:{},
      classObj:{
        active: true,
        helloWorld: true,

      }
    };
  },
  computed:{
    chassObjCom:function (){
      return{
        active:this.isActive && !this.error,
        helloWorld: this.error
      }
    }
  }
};

</script>


<template>
  <!--first 放置字符 -->
  <div>
    <p class="active">{{ test57 }}</p>
    <!--second 放置对象 -->
    <p :class="{active:isActive}"> hello </p>
    <!--和普通class一起不会覆盖 -->
    <p :class="{active:isActive}" class="helloWorld"> hello </p>
    <p :class="classObj">{{ test57 }}</p>
    <button @click="isActive=!isActive">change_active</button>
    <p :class="chassObjCom">hellokugou computed</p>
  </div>

</template>


<style>
.active{
  font-size: 80px;
  color: blue;
}
.helloWorld{
  background: aqua;
}


</style>

class 名的数组使用方式

<script>
export default {
  data() {
    return {
      test57: 'hellokugou',
      test56: 'helloWorld',
      isActive: true,
      error:{},
      classObj:{
        active: true,
        helloWorld: true,
      },
      activeClass: "active"
    };
  },
  computed:{
    chassObjCom:function (){
      return{
        active:this.isActive && !this.error,
        helloWorld: this.error
      }
    }
  }
};

</script>


<template>
  <!--first 放置字符 -->
  <div>
    <p class="active">{{ test57 }}</p>
    <!--second 放置对象 -->
    <p :class="{active:isActive}"> hello </p>
    <!--和普通class一起不会覆盖 -->
    <p :class="{active:isActive}" class="helloWorld"> hello </p>
    <p :class="classObj">{{ test57 }}</p>
    <button @click="isActive=!isActive">change_active</button>
    <p :class="chassObjCom">hellokugou computed</p>
    <!-- 数组语法 -->
    <p :class="[test56,activeClass]"> hellokugou-shuzu</p>
  </div>

</template>


<style>
.active{
  font-size: 80px;
  color: blue;
}
.helloWorld{
  background: aqua;
}


</style>

数组与对象一起使用

    <!-- 数组与对象结合 -->
    <p :class="[test56,{active:isActive}]"> dic and toup</p>

style 样式操作

• 驼峰写法

  fontSize

<script>
export default {
  data() {
    return {
      activeColor: 'red',
      fontSize: '50px',
      bgcColor: 'pink'
    };
  },
};

</script>


<template>
  <!--first 放置字符 -->
  <div>
    <!-- 第一种方式  -->
    <p style="color: red">hello</p>
    <!-- 第2种方式  -->
    <p :style="{color:activeColor,fontSize:fontSize,'background-color':bgcColor}">hello-v-bind</p>

  </div>

</template>


<style>
.active{
  font-size: 80px;
  color: blue;
}
.helloWorld{
  background: aqua;
}


</style>

数组语法

<script>
export default {
  data() {
    return {
      activeColor: 'red',
      fontSize: '50px',
      bgcColor: 'pink',
      styleObj: {
        color: 'red',
        fontSize: '60px',
        "background-color": 'pink'
      },
    };
  },
};

</script>


<template>
  <!--first 放置字符 -->
  <div>
    <!-- 第一种方式  -->
    <p style="color: red">hello</p>
    <!-- 第2种方式  -->
    <p :style="{color:activeColor,fontSize:fontSize,'background-color':bgcColor}">hello-v-bind</p>
    <!-- -->
    <p :style="styleObj">hello-56</p>
    <p :style="[styleObj,{border: '5px solid blue'}]">hello-57</p>


  </div>

</template>


<style>
.active{
  font-size: 80px;
  color: blue;
}
.helloWorld{
  background: aqua;
}


</style>