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

肖雅峰

于 2020-06-21 19:44:33 发布

阅读量3.3k

点赞数 1

分类专栏： Vue

本文链接：https://blog.youkuaiyun.com/xyf13920745534/article/details/106889875

版权

Vue 专栏收录该内容

6 篇文章

订阅专栏

本文介绍了一种使用Vue.js中的过滤器来格式化显示姓名数据的方法，特别是针对两个字和三个字的姓名，通过在两个字的姓名中间添加空格来保持视觉上的统一，提升数据展示的美观度。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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

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

过滤器

<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月'
      }
    }
  }

加入过滤器的结果