关于vue.js: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>