//動態(tài)class對象
<div :class="{ 'isActive': true, 'red': isRed }"></div>
//動態(tài)style對象
<div :style="{ color: bgColor, fontSize: '18px' }"></div>
//動態(tài)class數(shù)組
<div :class="['is-active', isRed ? 'red' : '' ]"></div>
//動態(tài)style數(shù)組
<div :style="[{ color: bgColor, fontSize: '18px' }, { fontWeight: '500' }]"></div>

<template>
    <div>
        <h2>動態(tài)添加類名</h2>
        <!-- 第一種方式:對象的形式 -->
        <!-- 第一個參數(shù) 類名， 第二個參數(shù)：boolean值 -->
        <!-- 對象的形式: 用花括號包裹起來，類名用引號， -->
        <!-- 優(yōu)點: 以對象的形式可以寫多個，用逗號分開 -->
        <p :class="{'sm' : true}">對象的形式</p>
        <p :class="{'sm' : false, 'lg': true}">對象的形式</p>
 
        <!-- 第二種方式:三元表達(dá)式 注意點：放在數(shù)組中，類名要用引號-->
        <p :class="[ controller.summary? 'sm' : 'lg' ]" >三元表示式</p>
 
        <!-- 第三種方式: 數(shù)組的形式 -->
        <p :class="[isTrue, isFalse]">數(shù)組的形式</p>
 
        <!-- 數(shù)組中用對象 -->
        <p :class="[{'sm': false}, isFalse]">數(shù)組中使用對象</p>
 
        <!--補充:  class中還可以傳方法，在方法中返回類名-->
        <p :class="setClass">通過方法設(shè)置class類名</p>
    </div>
 
    //-選中的一項更換背景色，其余兄弟元素沒有背景色
    <ul class="options-box">
       <li v-for="(item,index) in hours" 
           :key="index" @click="selectHour(item,index)" 
           :class="{selected:readySelectHour === index}">
           <span>{{item.name}}</span>
       </li>
    </ul>
</template>

<script>
    export default {
        data () {
           return {
               isTrue: 'sm',
               isFalse: 'lg'
           }；
        }，
 
  method: {
     setclass () {
        return 'sm';
      },
      selectHour(itemhour,index){
          this.hour = itemhour.name;
          this.readySelectHour = index;       
      },
 
  }
}
</script>

<style scoped>
    .sm {
        padding-top:10px;
    }
    .lg {
       padding-top:20px;
    }
 
li{
    text-align: center;
    line-height: 32px;
    font-size: 12px;
   &:hover {
       background-color:#f8f9fa;
    }
  &.selected{
        background-color: #e6fff7;
  }
 }
</style>

<div class="controller" :style="{paddingTop:controller.summary?'20px':'10px'}"></div>

<div class="controller" :class="[controller.summary? 'lg':'sm']"></div>