Vue.js 학습을 위한 필터에 대한 자세한 설명

서문

이 튜토리얼에서는 여러 예제를 통해 VueJs 필터를 이해하고 배우겠습니다. 이 글을 읽기 위한 전제조건은 Vue에 대한 기본 구문 기반이 이미 있다는 것입니다.

Vue.Js 필터의 기본

필터는 데이터를 적시에 처리하고 데이터를 입력하여 데이터 결과를 반환할 수 있는 간단한 함수입니다. Vue에는 매우 편리한 필터가 많이 있습니다. 공식 문서인 http://cn.vuejs.org/api/#Filter를 참조하세요. 필터는 일반적으로

{{ msg | capitalize }}
// 'abc' => 'ABC'

와 같이 파이프 표시 "|"를 사용합니다.

대문자 필터: 입력된 문자열을 대문자로 변환하는 필터입니다.

VueJs를 사용하면 필터를 연쇄 호출할 수 있습니다. 간단히 말해서 한 필터의 출력이 다음 필터의 입력이 된 다음 다시 필터링됩니다. 다음으로 Vue의 filterBy + orderBy 필터를 사용하여 모든 제품을 필터링하는 비교적 간단한 예를 상상할 수 있습니다. 필터링된 제품은 과일제품입니다.

filterBy 필터: 필터 값은 배열, filterBy + 필터 조건이어야 합니다. 필터 조건은 다음과 같습니다. 'optionKeyName'

의 'string || function'+ orderBy 필터: 필터 값은 배열, orderBy + 필터 조건이어야 합니다. 필터 조건은 다음과 같습니다. '문자열 || 배열 ||함수' + '오름차순의 경우 order ≥ 0 || 내림차순의 경우 order < 0'

다음으로 다음 예를 볼 수 있습니다. 제품 배열 제품, 우리는 이 배열을 순회하여 목록으로 인쇄하려고 합니다. 이는 v-for를 사용하여 쉽게 달성할 수 있습니다.

<ul class="product">
 <li v-for="product in products|filterBy &#39;水果&#39; in &#39;category&#39; |orderBy &#39;price&#39; 1">
 {{product.name}}-{{product.price | currency}}
 </li>
</ul>

위의 예는 'category'에 'fruit' 키워드가 포함된 목록을 필터링하기 위해 filterBy를 사용하는 것입니다. 반환된 목록은 'fruit' 키워드만 포함된 목록입니다. orderBy 필터는 가격을 기준으로 오름차순으로 정렬하려면 0보다 작은 매개변수만 추가하면 됩니다.

맞춤 필터

VueJs는 많은 기능을 제공합니다. 강력한 필터이지만 때로는 충분하지 않습니다. 다행히 Vue는 자체 필터를 정의하는 깔끔하고 간결한 방법을 제공하며, 파이프 "|"를 사용하여 필터링을 완료할 수 있습니다.

전역 사용자 정의 필터를 정의하려면 Vue.filter() 생성자를 사용해야 합니다. 이 생성자에는 두 개의 매개변수가 필요합니다.

Vue.filter() Constructor Parameters:

1.filterId: 필터 ID, 필터의 고유 식별자로 사용됩니다.

2.filter 함수: 필터 함수는 다음을 사용합니다. 매개변수를 수신한 후 수신된 매개변수를 원하는 데이터 결과로 형식화하는 함수입니다.

위의 예에서 제품 가격을 50% 할인받으려면 어떻게 해야 하나요? 실제로 구현된 맞춤 필터입니다. 즉, 제품 가격이 50% 할인됩니다. 이를 구현하려면 다음이 완료되어야 합니다.

a. 필터를 생성하는 생성자 할인이라는 도구가 있습니다

b. 제품의 원래 가격을 입력하면 50% 할인 후 할인된 가격을 반환할 수 있습니다.

코드는 아래와 같습니다. 🎜>

Vue.filter('discount', function(value) {
 return value * .5;
});
var product = new Vue({
 el: '.product',
 data: {
 products: [
  {name: '苹果',price: 25,category: "水果"},
  {name: '香蕉',price: 15,category: "水果"},
  {name: '雪梨',price: 65,category: "水果"},
  {name: '宝马',price: 2500,category: "汽车"},
  {name: '奔驰',price: 10025,category: "汽车"},
  {name: '柑橘',price: 15,category: "水果"},
  {name: '奥迪',price: 25,category: "汽车"}
 ]
 },
})

이제 Vue에 포함된 필터와 마찬가지로 사용자 정의 필터를 사용할 수 있습니다

<ul class="product">
 <li v-for="product in products|filterBy &#39;水果&#39; in &#39;category&#39; |orderBy &#39;price&#39; 0">
 {{product.name}}-{{product.price|discount | currency}}
 </li>
</ul>

위 코드로 구현된 제품은 50% 할인됩니다. , 그리고 가격 할인을 얻고 싶다면 어떻게 해야 할까요? 할인 필터에 할인 값 매개변수를 추가하고 필터를 수정해야 합니다.

Vue.filter('discount', function(value, discount) {
 return value * (discount / 100);
});

그런 다음 필터를 다시 호출하세요

<ul class="product">
 <li v-for="product in products|filterBy &#39;水果&#39; in &#39;category&#39; |orderBy &#39;price&#39; 0">
 {{product.name}}-{{product.price|discount 25 | currency}}
 </li>
</ul>

Vue 인스턴스에서 필터를 다음과 같이 구성할 수도 있습니다. 장점은 이는 이 필터를 사용할 필요가 없는 다른 Vue 인스턴스에는 영향을 미치지 않습니다.

/*定义在全局
Vue.filter('discount', function(value,discount) {
 return value * ( discount / 100 ) ;
});
*/
var product = new Vue({
 el: '.product',
 data: {
 products: [
  {name: '苹果',price: 25,category: "水果"},
  {name: '香蕉',price: 15,category: "水果"},
  {name: '雪梨',price: 65,category: "水果"},
  {name: '宝马',price: 2500,category: "汽车"},
  {name: '奔驰',price: 10025,category: "汽车"},
  {name: '柑橘',price: 15,category: "水果"},
  {name: '奥迪',price: 25,category: "汽车"}
 ]
 },
 //自定义在实例
 filters: {
 discount: function(value, discount) {
  return value * (discount / 100);
 }
 }
})

글로벌하게 정의하면 모든 인스턴스에서 필터를 호출할 수 있습니다. 인스턴스에 정의하면 해당 인스턴스에서 필터가 호출됩니다.

요약

이 글의 내용이 Vue를 배우거나 사용하는 모든 분들께 도움이 되기를 바랍니다. 소통하라는 메시지.

Vue.js 학습용 필터에 대한 더 많은 관련 기사를 보려면 PHP 중국어 웹사이트를 주목하세요!