programing

Vue.Js 2 입력 형식 번호

prostudy 2022. 4. 6. 21:54
반응형

Vue.Js 2 입력 형식 번호

나는 vuejs2를 사용하여 숫자 포맷을 위한 숫자 입력을 얻기 위해 고군분투해왔다.

일부 뷰 논리를 asp.net core 2에서 vue로 마이그레이션하는 중.

<input asp-for="Model.LoanAmount" value="@(Model.LoanAmount > 0 ? Model.LoanAmount.ToString("N2") : String.Empty)" >

입력 변경에 대한 관점을 다시 로드해야 했어

숫자 입력을 미국 형식과 소수점 2자리(100만.21)로 포맷하되 모델 값이 0이거나 비어 있을 때는 아무것도 표시하지 않는 방법이 필요하다.
vue-numeric은 거의 모든 것을 하지만 내가 자리 표시자를 사용하려고 할 때 나는 실패한다.

<vue-numeric v-model="vm.loanAmount" seperator="," placeholder=" " :precision="2" ></vue-numeric> 

빈 문자열을 사용하면 충돌하기 때문에 자리 표시자 공간을 사용해 보았다.0 또는 빈 값이 입력된 경우 이 예는 0.00을 표시한다.는 출력 타입과 빈 값 소품들을 가지고 놀려보았다.

나는 부랑자와 결혼하지는 않았지만 더 편리한 해결책을 몰라서 편리하다.

당신은 단지 a를 사용함으로써 포맷을 할 수 있다.computed별개의 재산getter, 그리고setter다른 의존성 없이 말이야

computed: {
  formattedValue: {
    get: function() {
      return this.value;
    },
    set: function(newValue) {
      if (newValue.length > 2) {
        newValue = newValue.replace(".", "");
        this.value =
          newValue.substr(0, newValue.length - 2) +
          "." +
          newValue.substr(newValue.length - 2);
      } else {
        this.value = newValue;
      }
    }
  }
}

https://codesandbox.io/s/p7j447k7wq

십진 분리기를 예시로만 추가했을 뿐인데, 그 부분을 추가해야 할 겁니다.,세터 내 수천 개의 분리기를 사용하여 전체 기능을 사용할 수 있도록 하십시오.

참조URL: https://stackoverflow.com/questions/53422585/vue-js-2-input-formatting-number

반응형