满足条件时停止 vue filter / javascript

Question

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' 和 return '#X'，因为它不会在满足第一个条件时中断。我能做什么？

Answer 1

你可以简化它：

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;
  
});

Answer 2

例如：

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

Answer 3

这里有一个post关于如何获取位数的方法。

此外，根据您的问题，除非存在阻止某人输入包含超过 3 位数字的数字的叠加条件，否则您的输出结果可能会类似于“#3051”。您将需要另一个 else-if 来检查位数 === 3.

Answer 4

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

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

在您的原始代码中，value 是 Number 类型，您正在检查 length 属性 Number 永远是 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;
  }
});

Answer 5

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

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

满足条件时停止 vue filter / javascript

Stop vue filter / javascript when condition is met

javascript

logic

vue.js