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

加入過濾器的結果