vue中動態添加class類名的方法

`<template>
<div>

<h2>動態添加類名</h2>


<!-- 第一種方式:對象的形式 -->
<!-- 第一個參數 類名， 第二個參數：boolean值 -->
<!-- 對象的形式: 用花括號包裹起來，類名用引號， -->
<!-- 優勢: 以對象的形式能夠寫多個，用逗號分開 -->
<p :class="{'p1' : true}">對象的形式(文字的顏色)</p>
<p :class="{'p1' : false, 'p': true}">對象的形式(文字的顏色)</p>


<!-- 第二種方式:三元表達式 注意點：放在數組中，類名要用引號-->
<p :class="[ 1 < 2 ? 'p1' : 'p' ]" >三元表示式(文字的顏色)</p>


<!-- 第三種方式: 數組的形式 -->
<p :class="[isTrue, isFalse]">數組的形式(文字的顏色)</p>

<!-- 數組中用對象 -->
<p :class="[{'p1': false}, isFalse]">數組中使用對象(文字的顏色)</p>

<!--補充: class中還能夠傳方法，在方法中返回類名-->
<p :class="setClass">經過方法設置class類名</p>
</div>
</template>

<script>
export default {

data () {
  return {
    isTrue: 'p1',
    isFalse: 'p'
  }；
}，

method: {
setclass () {

return 'p1';

}
}
}
</script>

<style scoped>
.p1 {

color: red;
font-size: 30px;

}
.p {

color: blue

}
</style>
`