VUE3 기본 튜토리얼: 데이터 필터링을 위한 필터 사용

VUE3는 현재 프런트엔드 개발에서 널리 사용되는 프레임워크입니다. VUE3가 제공하는 기본 기능은 프런트엔드 개발 효율성을 크게 향상시킬 수 있습니다. 그 중 필터는 VUE3에서 매우 유용한 도구입니다. 필터를 사용하면 데이터를 쉽게 필터링하고 처리할 수 있습니다.

그럼 필터란 무엇인가요? 간단히 말해서 필터는 VUE3의 필터입니다. 페이지에 보다 바람직한 결과를 표시하기 위해 렌더링된 데이터를 처리하는 데 사용할 수 있습니다. 필터는 템플릿에서 사용할 수 있는 기능으로, 데이터와 일부 매개변수를 전달하여 처리된 결과를 반환합니다. 실제로 일상적인 개발의 많은 작업은 필터를 통해 단순화될 수 있습니다.

데이터 필터링을 위해 필터를 사용하는 방법을 알아봅시다.

먼저 VUE3 인스턴스에서 필터 속성을 정의해야 합니다. 이 속성에 필터로 여러 함수를 정의할 수 있습니다. 아래 예제에서는 VUE3의 필터 기능을 사용하여 입력 데이터를 대문자로 변환합니다.

<div id="app">
    <input type="text" v-model="input">
    <p>输出结果：{{input | uppercase}}</p>
</div>

<script src="https://unpkg.com/vue@next"></script>
<script>
    const app = Vue.createApp({
      data() {
        return {
          input: ''
        }
      },
      filters: {
        uppercase(val) {
          return val.toUpperCase();
        }
      }
    })

    app.mount('#app')
</script>

위 예제에서는 먼저 v-model을 사용하여 입력 태그 Set의 데이터를 바인딩합니다. 인스턴스에 정의된 입력 속성에 추가합니다. 그런 다음 페이지에서 이름이 대문자인 필터가 참조됩니다. 마지막으로 VUE3 인스턴스에는 대문자 필터 함수가 정의되어 있습니다. 이 함수의 주요 기능은 문자를 대문자로 변환하는 것입니다.

여기서 주목해야 할 점은 필터에 여러 기능을 정의하는 동시에 동일한 태그에 여러 필터를 사용할 수도 있다는 것입니다. 방법은 필터 이름 뒤에 세로 막대와 다음 필터를 추가하는 것입니다. . 장치 이름을 클릭하면 됩니다.

위 예의 문자열 변환 외에도 필터를 사용하여 날짜, 통화, 숫자 등과 같은 데이터 유형의 형식을 지정할 수도 있습니다. 예를 들어 필터 함수를 사용하여 타임스탬프를 표준 시간 형식으로 변환할 수 있으며 코드는 다음과 같습니다.

<p>输出结果：{{time | timestampToDate}}</p>

...

filters: {
    timestampToDate(val) {
      const date = new Date(Number(val));
      const year = date.getFullYear();
      const month = date.getMonth() + 1;
      const day = date.getDate();
      return `${year}-${month}-${day}`;
  }
}

필터를 통해 가격 할인과 같은 특수한 논리를 구현할 수도 있습니다.

<p>输出结果：{{price | discount(0.8)}}</p>

...

filters: {
    discount(val, discountRate) {
      return val * discountRate;
  }
}

위 코드에 표시된 대로 , 필터의 할인 함수는 이전 예제와 약간 다릅니다. 템플릿에서 사용하는 경우 두 번째 괄호에 할인율을 입력합니다. 구현 효과로 판단하면 전달된 매개변수는 필터 함수의 val 값을 대체합니다.

요약하자면, VUE3 필터를 사용하면 데이터를 쉽게 처리할 수 있으므로 페이지 데이터 형식화 및 논리적 처리를 빠르게 구현할 수 있습니다. 실제 개발에서는 데이터 처리를 보다 효율적이고 편리하게 완료하기 위해 필요에 따라 여러 가지 필터 기능을 정의할 수 있습니다.

위 내용은 VUE3 기본 튜토리얼: 데이터 필터링을 위한 필터 사용의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!