Vue의 필터 사용 요약-JS 튜토리얼-php.cn

Vue의 필터 사용 요약

php中世界最好的语言

풀어 주다： 2018-05-15 11:42:48

원래의

3992명이 탐색했습니다.

이번에는 vue에서 필터 사용에 대한 요약을 가져오겠습니다. vue에서 필터를 사용할 때 주의 사항은 무엇입니까?

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

(1) 전역 필터 등록

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

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

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

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

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>vue自定义过滤器</title>
    <script src="../js/vue.js" type="text/javascript" charset="utf-8"></script>
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
  </head>
  <body>
    <p class="test">
      <p>{{message | sum}}</p>
      <p>{{message | cal 10 20}}</p> <!--过滤器函数始终以表达式的值作为第一个参数。带引号的参数视为字符串，而不带引号的参数按表达式计算。-->
      <p>{{message | sum | currency }}</p> <!--添加两个过滤器,注意不要冲突-->
      <input type="text" v-model="message | change"> <!--用户从input输入的数据在回传到model之前也可以先处理-->
    </p>
    <script type="text/javascript">
//    -----------------------------------------华丽分割线(从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>
  </body>
</html>

로그인 후 복사

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

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

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

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

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>vue自定义过滤器</title>
    <script src="../js/vue.js" type="text/javascript" charset="utf-8"></script>
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
  </head>
  <body>
    <p class="test">
      <p>{{message | sum}}</p>
      <p>{{message | cal 10 20}}</p> <!--过滤器函数始终以表达式的值作为第一个参数。带引号的参数视为字符串，而不带引号的参数按表达式计算。-->
      <p>{{message | sum | currency }}</p> <!--添加两个过滤器,注意不要冲突-->
      <input type="text" v-model="message | change"> <!--用户从input输入的数据在回传到model之前也可以先处理-->
    </p>
    <script type="text/javascript">
      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>
  </body>
</html>

로그인 후 복사

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

Vue의 필터 사용 요약

(1) 예제 1 원본 텍스트

var app5 = new Vue({
  el: &#39;#app5&#39;,
  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
      });;
    }
  }
})
 <ul>
  Filter Key<input type="text" v-model="key">  
    <li v-for="item in filterShoppingList">
      {{ item }}
    </li>
  </ul>

로그인 후 복사

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

Vue의 필터 사용 요약