vue2中class和style的简单使用

今天简单记录下两方面的学习，请看下图：

代码如下：

<template>
  <div class="">
    <p :class="{ black: isBlack, yellow: isYellow }">使用动态属性class,对象的写法</p>
    <p :class="[black, yellow]">使用动态属性class,数组的写法</p>
    <p :class="isShowClass ? '' : 'classItem'">使用动态属性class,三元表达式写法</p>
    <p :style="styleData">使用style,驼峰式写法</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      isBlack: true,
      isYellow: true,
      black: "black",
      yellow: "yellow",
      styleData: {
        fontSize: "40px", //转化为驼峰式写法
        color: "red",
        backgroundColor: "#ccc", //转化为驼峰式
      },
      isShowClass: true,
    };
  },
  methods: {},
};
</script>

<style scoped>
.classItem {
  color: "blue";
  font-size: 20px;
}
</style>