vue解决两个字和三个字对齐问题

2023年2月18日 75次阅读 来源: 肖雅峰

在接收数据的时候经常会出现两个字的名字的名字和三个字的名字，如果不对齐会显得非常难看

《vue解决两个字和三个字对齐问题》

所以这个时候就需要格式一下我们的数据，在两个字中间加入一个空格，可以使用过滤器的方法将所有两个字的名字中间加入一个空格。

过滤器

<script>
filters: {
    nameFormat (value) {
      if (value.length < 3) { //如果是两个汉字
        value = value.slice(0, 1) + '　' + value.slice(1) //拆分字符串并加入全角的空格
      }
      return value
    }
  }
</script>

在数据处理的过程中加入过滤器

<span v-for="(item, i) in val" class="name">{
  { item|nameFormat}}</span>

数据

data () {
    return {
      mentorshipGrade: mentorshipGrade,
      mentorshipGroup: {
        list: {
          fourthGradeName: ['测试', '测试', '测试'],
          thirdGradeName: ['测试', '测试据', '测试数', '测试'],
          secondGradeName: ['测试数', '测试', '测试', '测试'],
          firstGradeName: ['测试', '测试据', '测试', '测试']
        },
        createTime: '2020年5月'
      }
    }
  }

加入过滤器的结果

《vue解决两个字和三个字对齐问题》

    原文作者：肖雅峰
    原文地址: https://blog.csdn.net/xyf13920745534/article/details/106889875
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞