更改字体大小如果字符超过特定字符数

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>