Vue2.0 시리즈에서 필터를 어떻게 사용하나요?-JS 튜토리얼-php.cn

Vue2.0 시리즈에서 필터를 어떻게 사용하나요?

亚连

풀어 주다： 2018-06-02 10:11:51

원래의

2458명이 탐색했습니다.

이 글은 주로 Vue2.0 시리즈의 필터 사용법을 소개하고 참고자료를 제공합니다.

vue2.0은 필터를 포기했으며 일부 일반적인 텍스트 형식에 대한 사용자 정의 필터가 필요합니다.

사용하기 매우 쉬운 느낌입니다! !

필터는 이중 중괄호 보간과 v-bind 표현식의 두 가지 위치에서 사용할 수 있습니다.

파이프 문자로 표시된 JavaScript 표현식 끝에 필터를 추가해야 합니다.

1. 전역 필터 등록

참고:
1. 전역 메소드 Vue.filter()는 사용자 정의 필터를 등록하며 vue 인스턴스화 앞에 배치되어야 합니다. 필터 기능은 항상 다음으로 표현됩니다. 수식의 값은 첫 번째 매개변수로 사용됩니다. 따옴표가 있는 매개변수는 문자열로 처리되고, 따옴표가 없는 매개변수는 표현식으로 계산됩니다
3. 이 두 필터의 처리가 충돌하지 않는다면 두 개의 필터 매개변수를 설정할 수 있습니다
4. 입력에서 사용자가 입력한 데이터는 모델에 전송되기 전에 처리될 수도 있습니다.

Case

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>过滤器</title>
</head>
<body>

<p id="app">
  <!-- 首字符串大写 -->
  <p>首字母大写过滤器：{{str | upcase}}</p>
  <!-- 给过滤器传入参数 -->
  <p>求和过滤器：{{message | sum(10,20)}}</p> 
</p>

<script type="text/javascript" src=&#39;https://i0.jrjimg.cn/zqt-red-1000/focus/focus2017YMZ/teamFrighting/js/vue.min.js&#39;></script>
<script type="text/javascript">
    //全局方法 Vue.filter()注册一个自定义过滤器,必须放在Vue实例化前面
    // 注册一个首字母大写的过滤器
    Vue.filter("upcase", function(value) { 
        if (!value) return &#39;&#39;
        value = value.toString()
        return value.charAt(0).toUpperCase() + value.slice(1)
    });
    // 全局注册一个求和过滤器
    Vue.filter(&#39;sum&#39;, function (value, a, b) {
      return value + a + b;
    });

    var demo = new Vue({
      el: "#app",
      data: {
        str:&#39;hello&#39;,
        message:12
      }
    });
</script>
</body>
</html>

로그인 후 복사

Case 효과:

2. 인스턴스화 내부에 등록

필터는 다음과 같은 작업을 수행할 수 있습니다. 또한 인스턴스 내에서는 이를 사용하는 인스턴스 내에서만 등록됩니다.

위 사례에서 적용:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title></title>
</head>
<body>

<p id="app">
  <!-- 首字符串大写 -->
  <p>首字母大写过滤器：{{str | upcase}}</p>
  <!-- 给过滤器传入参数 -->
  <p>求和过滤器：{{message | sum(10,20)}}</p> 
</p>

<script type="text/javascript" src=&#39;https://i0.jrjimg.cn/zqt-red-1000/focus/focus2017YMZ/teamFrighting/js/vue.min.js&#39;></script>
<script type="text/javascript">
    var demo = new Vue({
      el: "#app",
      data: {
        str:&#39;hello&#39;,
        message:12
      },
      filters: {
        upcase:function(value){
          if (!value) return &#39;&#39;
          value = value.toString()
          return value.charAt(0).toUpperCase() + value.slice(1)
        },
        sum:function(value, a, b){
          return value + a + b;
        }
      }
    });

</script>
</body>
</html>

로그인 후 복사

효과:

3. 일반 필터

타임스탬프를 기준으로 시간 형식으로 변환: mm-dd hh:tt

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title></title>
</head>
<body>

<p id="app">
  <!-- 将时间戳转化为时间 -->
  <h1>根据时间戳转化为时间：{{ str | formateTime}}</h1>
</p>

<script type="text/javascript" src=&#39;https://i0.jrjimg.cn/zqt-red-1000/focus/focus2017YMZ/teamFrighting/js/vue.min.js&#39;></script>
<script type="text/javascript">
    var demo = new Vue({
      el: "#app",
      data: {
        str:1517568434324,
      },
      filters: {
        formateTime:function(nS){
          return ((new Date(nS).getMonth()+1)<10?&#39;0&#39;+(new Date(nS).getMonth()+1):(new Date(nS).getMonth()+1)) + &#39;-&#39; + (new Date(nS).getDate()<10?&#39;0&#39;+new Date(nS).getDate():new Date(nS).getDate()) + &#39; &#39; + (new Date(nS).getHours()<10?&#39;0&#39;+new Date(nS).getHours():new Date(nS).getHours()) + &#39;:&#39; + (new Date(nS).getMinutes()<10?&#39;0&#39;+new Date(nS).getMinutes():new Date(nS).getMinutes())
        }
      }
    });

</script>
</body>
</html>

로그인 후 복사

사례 효과:

위 내용은 모두를 위해 제가 정리한 내용입니다. 앞으로 모든 사람에게 도움이 되기를 바랍니다.