【vue2基础】Class 与 Style 绑定

<template>
  <div id="app">
    <!-- <div v-bind:class="{ active: isActive }"></div>对象语法.传给v-bind:class一个对象，以动态的切换class,
    上面的语法表示 active 这个 class 存在与否将取决于数据 property isActive 的 truthiness。 -->
    <!--可以把数组传给v-bind:class,以应用一个class列表，
    想根据条件切换列表中的class，可以用三元表达式 -->
    <div
      :class="[isActive ? 'active' : '',isGreen ? 'green':'']"
      class="test"
      style="width:200px;text-align:center;line-height:200px">
      hi vue
    </div>
    <div
      :style="{color : color , fontSize:size,background:isRed?'#ff0000':''}">
      happy
    </div>
  </div>
</template>

<script>
export default {
    
    
  name: 'Demo1',
  data: function() {
    
    
    return {
    
    
      isActive: true,
      isGreen: true,
      color: '#ffffff',
      size: '50px',
      isRed: true
    }
  },
  mounted() {
    
    
    this.test()
  },
  methods: {
    
    
  }
}
</script>

<style scoped>
.test{
    
    font-size:30px; color: blue;}
.green{
    
    color: #0f0;}
.active{
    
    background: #fff000;}
</style>