更改字體大小如果字符超過特定字符數

Question

如果vueJS中的名稱超過15個或20個字符，如何更改字體大小？

這裏是我的代碼

<p class="name" v-if="roleProfile"><b>{{ roleProfile.company_name }}</b></p> 

Answer 1

創建一個計算的屬性添加一個類的基礎上roleProfile.company_name長度<p>標籤：

computed: { 
    profileClass() { 
    let profileClass = "name"; 
    if (this.roleProfile.company_name.length > 15) { 
     profileClass += " smallFont"; 
    } 

    return profileClass; 
    } 
} 

然後在你的模板：

<p :class="profileClass" v-if="roleProfile"> 
    <b>{{ roleProfile.company_name }}</b> 
</p>