时间戳

首页 > 解决方案 > 根据 Vuejs 中的字符串长度更改字体大小

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

问题描述

<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>

风格.sass

.welcome
   font-size: 160%

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

标签： javascriptcssvue.jssass

解决方案

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

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

推荐阅读