Class 与 Style 绑定

class 对象绑定方式

<template>
  <div>
    <p :class="{red: hasColor, fontSize: hasFontSize}">class对象绑定</p>
    <p :class="classStyle">class对象绑定</p>
  </div>
</template>

<script>
export default {
  name: "App",
  data() {
    return {
      hasColor: true,
      hasFontSize: true,
      classStyle: {
        red: true,
        fontSize: false
      }
    };
  },
};
</script>

<style>
.red {
  color: red;
}
.green {
  color: green;
}
.fontSize {
  font-size: 30px;
}
</style>

class 数组绑定方式

<template>
  <div>
    <p :class="[hasColor ? 'red' : 'green', hasFontSize ? 'fontSize' : '']">class数组语法1</p>
    <p :class="[redClass, fontSize]">class数组语法2</p>
    <p :class="[hasFontSize ? 'fontSize' : '' , { red: hasColor }]">class数组语法3</p>
  </div>
</template>

<script>
export default {
  name: "App",
  data() {
    return {
      hasColor: true,
      hasFontSize: true,
      redClass: 'red' ,
      fontSize: 'fontSize'
    };
  },
};
</script>

<style>
.red {
  color: red;
}
.green {
  color: green;
}
.fontSize {
  font-size: 30px;
}
</style>

style的 对象和数组 绑定方式

<template>
  <div>
    <p
      style="border: 1px solid green"
      :style="{ color: isColor ? 'red' : '', fontSize: '28px' }"
    >
      style对象语法
    </p>
    <p :style="[{color: 'red'}, {fontSize: '28px'}]">style数组语法</p>
  </div>
</template>

<script>
export default {
  name: "App",
  data() {
    return {
      isColor: false,
    };
  },
};
</script>