526互联

vue-test ------class绑定

发布时间 2023-11-07 23:12:28作者: 林浅
<template>
  <p :class="{'active':isActive}">Class样式绑定</p>
  <p :class="Objec">Class样式绑定</p>
  <p :class="[arrActive,arrHasErr]">Class样式绑定3</p>
  <p :class="isActive ? 'active':' '">Class样式绑定4</p>


</template>

<script>
export default {
  name: "ClassDemo",
  data(){
    return{
      isActive: false,
      Objec:{
        'active':true,
        'isAAA':true
      },
      arrActive:"active",
      arrHasErr:"isAAA"
    }
  }
}
</script>

<style scoped>
.active{
  color: red;

}
.isAAA{
  font-size: 30px;
}
</style>