vue中style行内样式和claass动态样式

1.在vue中style行内动态样式通过 :style来开启动态属性，style={样式名:值}控制如下：

<p :style="{ backgroundColor: cor, fontSize: size }">这是一段文本</p>

export default {
  data() {
    return {
      cor: 'yellow',
      size: '30px'
    }
  }
}

2.动态Class样式通过:class="{样式名:true|false}"来开启，通过真假控制是否启用样式，如下

<p :class="{ cors: bol, font: sz }">Class动态样式</p>

export default {
  data() {
    return {,
      bol: true,
      sz: true,
    }
  }
}

.cors {
  background-color: #4ce48e;
  line-height: 2;
}

.font {
  font-size: 2em;
}

进阶用法：例如：通过点击按钮控制样式是否显示，给元素绑定点击事件，点击之前给控制样式的值，取反可控制是否开启和显示，如下

<p @click="as" :class="{ cors: bol, font: sz }">Class动态样式</p>

  methods: {
    as() {
      this.sz = !this.sz
    }
  }

或者

<p @click="sz = !sz" :class="{ cors: bol, font: sz }">Class动态样式</p>