vue解决两个字和三个字对齐问题
在接收数据的时候经常会出现两个字的名字的名字和三个字的名字,如果不对齐会显得非常难看所以这个时候就需要格式一下我们的数据,在两个字中间加入一个空格,可以使用过滤器的方法将所有两个字的名字中间加入一个空格。过滤器<script>filters: {nameFormat (value) {if (value.length < 3) { //如果是两个汉字value = value.s
·
在接收数据的时候经常会出现两个字的名字的名字和三个字的名字,如果不对齐会显得非常难看
所以这个时候就需要格式一下我们的数据,在两个字中间加入一个空格,可以使用过滤器的方法将所有两个字的名字中间加入一个空格。
过滤器
<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月'
}
}
}
加入过滤器的结果
更多推荐
已为社区贡献2条内容
所有评论(0)