样式与数据绑定

<template>
  <div>
 <!--直接添加样式-->
    <div class="active"></div>
    <!--样式与数据绑定-->
    <div :class="{active: isActive}"></div>
    <br>
    <div :class="[activeClass, errorClass]">文字</div>
  </div>
</template>

<script>
export default {
  name: 'HelloWorld',
  data () {
    return {
      isActive: true,
      activeClass: 'active',
      errorClass: 'text-danger'
    }
  }
}
</script>

<!--样式-->
<style scoped>
  .active {
    width: 100px;
    height: 100px;
    background: red;
  }
  .text-danger {
    background: yellow;
    text-align: center;
  }
</style>

scoped：当前样式

<style scoped>

</style>