<template>
<div>
<h2>動態(tài)添加類名</h2>
<!-- 第一種方式:對象的形式 -->
<!-- 第一個參數(shù) 類名剃幌， 第二個參數(shù)：boolean值 -->
<!-- 對象的形式: 用花括號包裹起來聋涨，類名用引號， -->
<!-- 優(yōu)點: 以對象的形式可以寫多個负乡，用逗號分開 -->
<p :class="{'p1' : true}">對象的形式(文字的顏色)</p>
<p :class="{'p1' : false, 'p': true}">對象的形式(文字的顏色)</p>
<!-- 第二種方式:三元表達式 注意點：放在數(shù)組中牍白，類名要用引號-->
<p :class="[ 1 < 2 ? 'p1' : 'p' ]" >三元表示式(文字的顏色)</p>
<!-- 第三種方式: 數(shù)組的形式 -->
<p :class="[isTrue, isFalse]">數(shù)組的形式(文字的顏色)</p>
<!-- 數(shù)組中用對象 -->
<p :class="[{'p1': false}, isFalse]">數(shù)組中使用對象(文字的顏色)</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>
————————————————
版權聲明：本文為CSDN博主「garyHoH」的原創(chuàng)文章，遵循 CC 4.0 BY-SA 版權協(xié)議切省，轉載請附上原文出處鏈接及本聲明最岗。
原文鏈接：https://blog.csdn.net/qq940853667/article/details/77413323
