问答博客资讯标签用户活动
logo极客观点logo项目管理logoHarmonyOS
javascript
前端
python
node.js
react
vue.js
php
laravel
go
人工智能
mysql
linux
ios
java
android
css
typescript
spring
程序员
logoONES 研发管理logo思否企业问答logo安谋科技 XPU

vue页面，金额小数点后面和前面字体大小不一致的实现

头像
gaochenyang
    68360104

    123.png

    这个地方的金额样式如何实现呢用vue写的页面，整数部分字体比较大，小数部分字体比较小，求大神指教

    vue.js前端html5css3
    阅读 11.4k
    3 个回答
    得票最新
    头像
    xuhaibing
      14721146
          //模拟data数据
      data(
       return {
          price:'88888.00'
          }
       )
    //ps:v-html绑定数据
    //1.分割价钱 => ["88888", "00"]
    let splitPrice = this.price.split(".");
    //2.重新赋值
    this.price = `${splitPrice[0]}.<span style="font-size:12px;">${splitPrice[1]}</span>`;
      头像
      li_shifeng
        6811616

        将金额拆分两部分，用个span或者i包一下，单独设置一下大小不就好了

        头像
        stone
          2.3k1310
          <!DOCTYPE html>
<html>
<head>
  <title></title>
  <style type="text/css">
    .line {
      display: flex;
      align-items: flex-end;
      color: orange;
    }
    .integer {
      font-size: 20px;
      line-height: 0.9;
    }
    .decimal {
      font-size: 16px;
      line-height: 1;
    }
  </style>
</head>
<body>
  <div class="line">
    <span class="integer">82,410</span>
    <small class="decimal">.00</small>
  </div>
</body>
</html>
          撰写回答
          你尚未登录，登录后可以
          • 和开发者交流问题的细节
          • 关注并接收问题和回答的更新提醒
          • 参与内容的编辑和改进，让解决方法与时俱进
          推荐问题