根据 Vuejs 中的字符串长度更改字体大小

Question

<template>
 <div>
  <v-layout row wrap>
   <v-flex xs8>
     <div class="welcome">
       {{user.full_name}}
     </div>
   </v-flex>
   <v-flex xs4>
    <router-link :to="'/user_profile'">My Page</router-link>
   </v-flex>
  </v-layout>
 <div>
</template>

style.sass

.welcome
   font-size: 160%

我希望 user.full_name 具有基于 full_name 长度的动态字体大小，因为现在如果 full_name 太长它不适合并重叠。有没有办法根据字符串的长度进行动态样式设置？

Answer 1

你可以在课堂上使用条件句

<div :class="user.full_name.length<20? 'welcome': 'welcomeLarge'"></div>