满足条件时停止 vue 过滤器/javascript答案

【问题标题】：Stop vue filter / javascript when condition is met满足条件时停止 vue 过滤器/javascript
【发布时间】：2020-07-07 15:41:20
【问题描述】：

Javascript / Vue n00b。想要编写一个过滤器来格式化一个 1 - 3 位数字的值。我希望将 1 位数字更改为“#00X”，将 2 位数字更改为“#0XX”，将 3 位数字更改为“#XXX”。到目前为止，我有这个：

//Vue Filter

Vue.filter('number_filter', function (value){
  if(value.length === 1){
    value = value.toString()
    return '#00' + value;
  }else if(value.length === 2){
    value = value.toString()
    return '#0'+ value;
  }else{
    value = value.toString()
    return '#' + value;
  }
});

过滤器将采用“X”并返回“#X”，因为满足第一个条件时它不会中断。我能做什么？

【问题讨论】：

使用String(value).length

标签： javascript vue.js logic

【解决方案1】：

您可以使用String.prototype.padStart() 并避免使用if/else：

Vue.filter('number_filter', function (value){
    return '#' + value.toString().padStart(3, '0');
});

在您的原始代码中，value 属于 Number 类型，您正在检查 Number 上的 length 属性，该属性始终为 undefined，您需要转换首先将其发送到string，然后检查值：

Vue.filter('number_filter', function (value){
  value = value.toString();
  if(value.length === 1) {
    return '#00' + value;
  } else if(value.length === 2) {
    return '#0'+ value;
  } else {
    return '#' + value;
  }
});

【讨论】：

【解决方案2】：

你可以简化它：

Vue.filter('number_filter', function (value){

  value = value.toString()
 
  if(value.length === 1){
    return '#00' + value;
  }
  if(value.length === 2){
    return '#0'+ value;
  }
    return '#' + value;
  
});

【讨论】：

【解决方案3】：

这里有一个post，关于如何获取位数。

此外，根据您的问题，除非存在阻止某人输入包含 3 位以上数字的数字的重叠条件，否则您的输出可能会以“#3051”之类的形式结束。您需要另一个 else-if 来检查位数 === 3。

【讨论】：

【解决方案4】：

例如：

 Vue.filter('number_filter', function (value){
     return "#"+"0".repeat(3 - value.length)+value.toString();
 });

【讨论】：

【解决方案5】：

String 方法 padStart 可以满足您的要求。它将添加0 两位数，其余部分将按原样返回。

Vue.filter('number_filter', function (value){
 return '#' + value.padStart(3, 0)
});

【讨论】：