집 > 기사 > 웹 프론트엔드 > Vue에서 필터를 사용하는 방법

Vue에서 필터를 사용하는 방법

php中世界最好的语言원래의: 2018-06-02 10:16:251607검색

이번에는 Vue에서 필터를 사용하는 방법과 Vue에서 필터를 사용할 때 주의 사항에 대해 알려드리겠습니다. 다음은 실제 사례입니다.

1. 사용자 정의 filter, 물론 여기에는 전역적으로 등록하고 인스턴스화 내부에 등록하는 것이 포함됩니다.

(1) 전역 필터 등록

(1) 전역 메서드 Vue.filter() 등록 사용자 정의 필터를 배치해야 합니다. Vue 인스턴스화 전

(2) 필터 함수는 항상 expression의 값을 첫 번째 매개변수로 사용합니다. 따옴표가 있는 매개변수는 문자열으로 처리되고, 따옴표가 없는 매개변수는 표현식으로 계산됩니다

(3) 두 필터의 처리가 충돌하지 않는 한 두 개의 필터 매개변수를 설정할 수 있습니다

(4) 입력의 사용자는 모델로 반환되기 전에 처리될 수도 있습니다.

nbsp;html>

  
    <meta>
    <title>vue自定义过滤器</title>
    <script></script>
    <meta>
  
  
    <p>
      </p><p>{{message | sum}}</p>
      <p>{{message | cal 10 20}}</p> <!--过滤器函数始终以表达式的值作为第一个参数。带引号的参数视为字符串，而不带引号的参数按表达式计算。-->
      <p>{{message | sum | currency }}</p> <!--添加两个过滤器,注意不要冲突-->
      <input> <!--用户从input输入的数据在回传到model之前也可以先处理-->
    
    <script>
//    -----------------------------------------华丽分割线(从model->view)---------------------------------------
      Vue.filter("sum", function(value) {  //全局方法 Vue.filter() 注册一个自定义过滤器,必须放在Vue实例化前面
        return value + 4;
      });
      Vue.filter(&#39;cal&#39;, function (value, begin, xing) {  //全局方法 Vue.filter() 注册一个自定义过滤器,必须放在Vue实例化前面
        return value + begin + xing;
      });
//    -----------------------------------------华丽分割线(从view->model)---------------------------------------
      Vue.filter("change", {
        read: function (value) { // model -> view 在更新 `<input>` 元素之前格式化值
          return value;
        },
        write: function (newVal,oldVal) { // view -> model 在写回数据之前格式化值
          console.log("newVal:"+newVal); 
          console.log("oldVal:"+oldVal);
          return newVal;
        }
      });
      var myVue = new Vue({
        el: ".test",
        data: {
          message:12
        }
      });
    </script>

필터는 기본적으로 현재 항목을 전달하며 필터의 첫 번째 매개변수는 기본적으로 현재 항목이 됩니다.

(2) 인스턴스화 내부에 등록됨

위의 예는 Vue 전역에 직접 등록됩니다. 이 필터를 사용하지 않는 다른 인스턴스도 이를 강제로 수락하게 됩니다. 실제로 필터는 Vue 전역에 등록될 수 있습니다. 인스턴스를 사용할 때만 인스턴스에 등록합니다

위 프로그램은 다음과 같이 다시 작성됩니다.

nbsp;html>

  
    <meta>
    <title>vue自定义过滤器</title>
    <script></script>
    <meta>
  
  
    <p>
      </p><p>{{message | sum}}</p>
      <p>{{message | cal 10 20}}</p> <!--过滤器函数始终以表达式的值作为第一个参数。带引号的参数视为字符串，而不带引号的参数按表达式计算。-->
      <p>{{message | sum | currency }}</p> <!--添加两个过滤器,注意不要冲突-->
      <input> <!--用户从input输入的数据在回传到model之前也可以先处理-->
    
    <script>
      Vue.filter("change", {
        read: function (value) { // model -> view 在更新 `<input>` 元素之前格式化值
          return value;
        },
        write: function (newVal,oldVal) { // view -> model 在写回数据之前格式化值
          console.log("newVal:"+newVal); 
          console.log("oldVal:"+oldVal);
          return newVal;
        }
      });
      var myVue = new Vue({
        el: ".test",
        data: {
          message:12
        },
        filters: {
          sum: function (value) {
            return value + 4;
          },
          cal: function (value, begin, xing) {
            return value + begin + xing;
          }
        }
      });
    </script>

2. js에서 반복 함수 필터를 사용합니다

Vue에서 필터를 사용하는 방법

(1) 예제 1 원본 텍스트

var app5 = new Vue({
  el: '#app5',
  data: {
    shoppingList: [
      "Milk", "Donuts", "Cookies", "Chocolate", "Peanut Butter", "Pepto Bismol", "Pepto Bismol (Chocolate flavor)", "Pepto Bismol (Cookie flavor)"
    ],
    key: ""
  },
  computed: {
    filterShoppingList: function () {
      // `this` points to the vm instance
      var key = this.key;
      var shoppingList = this.shoppingList;
      //在使用filter时需要注意的是，前面调用的是需要使用filter的数组，而给filter函数传入的是数组中的每个item，也就是说filter里面的函数，是每个item要去做的，并将每个结果返回。
      return shoppingList.filter(function (item) {
        return item.toLowerCase().indexOf(key.toLowerCase()) != -1
      });;
    }
  }
})

{{ item }}

최종 효과는 다음과 같습니다. 키워드에 따라 목록을 필터링하는 기능.

Vue에서 필터를 사용하는 방법

다른 Js 반복 방법 - filter(), map(), some(), Every(), forEach(), lastIndexOf(), indexOf()

사례를 읽고 나면 마스터하셨으리라 믿습니다. 더 흥미로운 방법을 알아보려면 PHP 중국어 웹사이트의 다른 관련 기사를 주목해 보세요!