Vue 자체 필터 인 스 턴 스 구현

13650 단어 vue필터
필터 쓰기

{{ message | Filter}}
2 Vue 자체 필터:capitalize
기능:이니셜 대문자

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Vue      </title>
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
    <script src="../js/vue.js" type="text/javascript" charset="utf-8"></script>
  </head>
  <body>
    <div class="test">
      {{message | capitalize}}
    </div>
    <script type="text/javascript">
      var myVue = new Vue({
        el: ".test",
        data: {
          message: "abc"
        }
      })
    </script>
  </body>
</html>
위 코드 출력:Abc
3V ue 자체 필터:uppercase
기능:전체 대문자

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Vue      </title>
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
    <script src="../js/vue.js" type="text/javascript" charset="utf-8"></script>
  </head>
  <body>
    <div class="test">
      {{message | uppercase}}
    </div>
    <script type="text/javascript">
      var myVue = new Vue({
        el: ".test",
        data: {
          message: "abc"
        }
      })
    </script>
  </body>
</html>
위 코드 출력:ABC
 4 Vue 자체 필터:uppercase
기능:모든 소문 자

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Vue      </title>
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
    <script src="../js/vue.js" type="text/javascript" charset="utf-8"></script>
  </head>
  <body>
    <div class="test">
      {{message | lowercase}}
    </div>
    <script type="text/javascript">
      var myVue = new Vue({
        el: ".test",
        data: {
          message: "ABC"
        }
      })
    </script>
  </body>
</html>
위 코드 출력:abc
 5 Vue 자체 필터:currency
기능:금전 및 소수점 출력
인자:
첫 번 째 매개 변수     {String}[통화 기호]-기본 값:'$'
두 번 째 매개 변수     {Number}[소수]-기본 값:2

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Vue      </title>
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
    <script src="../js/vue.js" type="text/javascript" charset="utf-8"></script>
  </head>
  <body>
    <div class="test">
      {{message | currency}} <!--  $123.47-->
      {{message | currency '¥' "1"}} <!--  $123.5-->
    </div>
    <script type="text/javascript">
      var myVue = new Vue({
        el: ".test",
        data: {
          message: "123.4673"
        }
      })
    </script>
  </body>
</html>
6 Vue 자체 필터:pluralize
기능:하나의 인자 만 있 으 면 복수 형식 은 간단하게 끝 에's'를 추가 합 니 다.여러 개의 인자 가 있 으 면 매개 변 수 는 하나의 문자열 배열 로 여 겨 지고 하나,두 개,세 개의...복수 어 에 대응 합 니 다.값 의 개수 가 매개 변수의 개수 보다 많 으 면 마지막 매개 변 수 를 많이 사용 합 니 다.
인자:{String}single,[double,triple,...

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Vue      </title>
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
    <script src="../js/vue.js" type="text/javascript" charset="utf-8"></script>
  </head>
  <body>
    <div class="test">
    {{message}}  {{message | pluralize 'item'}} <!--  : 1 item-->
    
      <ul v-for="item in lili">
        <li>
          {{item}}  {{item | pluralize 'item'}} <!--  : 1  item 2  items 3  items-->
        </li>
      </ul>
      
      <ul v-for="item in lili">
        <li>
          {{item}}  {{item | pluralize 'st' 'rd'}} <!--  : 1  st 2  rd 3  rd-->
        </li>
      </ul>
      
      <ul v-for="item in man">
        <li>
          {{item}}  {{item | pluralize 'item'}} <!--  : 1  item 2  items 3  items-->
        </li>
      </ul>
      
      <ul v-for="item in man">
        <li>
          {{item}}  {{item | pluralize 'st' 'rd'}} <!--  : 1  st 2  rd 3  rd-->
        </li>
      </ul>
    </div>
    <script type="text/javascript">
      var myVue = new Vue({
        el: ".test",
        data: {
          message: 1,
          lili: [1,2,3],
          man: {
            name1: 1,
            name2: 2,
            name3: 3
          }
        }
      })
    </script>
  </body>
</html>
7 Vue 자체 필터:debounce
(1)제한:@에서 사용 해 야 함
(2)인자:{Number}[wait]-기본 값:300
(3)기능:포장 프로세서,x ms 실행 지연,기본 300 ms 지연.포 장 된 프로 세 서 는 호출 후 적어도 x ms 를 지연 시 킵 니 다.지연 이 끝나 기 전에 다시 호출 하면 지연 시간 은 x ms 로 초기 화 됩 니 다.

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Vue      </title>
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
    <script src="../js/vue.js" type="text/javascript" charset="utf-8"></script>
  </head>
  <body>
    <div class="test">
      <button id="btn" @click="disappear | debounce 10000">   ,  10    </button>
    </div>
    <script type="text/javascript">
      var myVue = new Vue({
        el: ".test",
        methods: {
          disappear: function () {
            document.getElementById("btn").style.display= "none";
          }
        }
      })
    </script>
  </body>
</html>
8Vue 자체 필터:limitBy
(1)제한:v-for(즉 배열)에서 사용 해 야 합 니 다.
(2)두 개의 인자:
첫 번 째 인자:{Number}취득 수량
두 번 째 인자:{Number}오프셋

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Vue      </title>
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
    <script src="../js/vue.js" type="text/javascript" charset="utf-8"></script>
  </head>
  <body>
    <div class="test">
      <ul v-for="item in lili | limitBy 10"> <!--  1 2 3 4 5 6 7 8 9 10-->
        <li>{{item}}</li>
      </ul>
      <ul v-for="item in lili | limitBy 10 3"> <!--   4 5 6 7 8 9 10 11 12 13-->
        <li>{{item}}</li>
      </ul>
    </div>
    <script type="text/javascript">
      var myVue = new Vue({
        el: ".test",
        data: {
          lili: [1,2,3,4,5,6,7,8,9,10,11,12,13,14,15]
        }
      })
    </script>
  </body>
</html>
 9Vue 자체 필터:filter By
(1)제한:v-for(즉 배열)에서 사용 해 야 합 니 다.
(2)세 개의 인자:
첫 번 째 인자:{String|Function}검색 할 문자열
두 번 째 인자:in(선택 가능,검색 위치 지정)
세 번 째 인자:{String}(선택 가능,배열 형식)

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Vue      </title>
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
    <script src="../js/vue.js" type="text/javascript" charset="utf-8"></script>
  </head>
  <body>
    <div class="test">
      <ul v-for="item in lili | filterBy 'o' "> <!--  oi oa lo ouo oala-->
        <li>{{item}}</li>
      </ul>
      
      <ul v-for="item in man | filterBy 'l' in 'name' "> <!--  lily lucy-->
        <li>{{item.name}}</li>
      </ul>
      
      <ul v-for="item in man | filterBy 'l' in 'name' 'dada' "> <!--  lily+undefined lucy+undefined undefined+lsh-->
        <li>{{item.name+"+"+item.dada}}</li>
      </ul>
    </div>
    <script type="text/javascript">
      var myVue = new Vue({
        el: ".test",
        data: {
          lili: ["oi", "oa", "ll", "lo" ,"ouo" ,"kk" ,"oala"],
          man: [  //    man   ,    
          {name: "lily"},
          {name: "lucy"},
          {name: "oo"},
          {dada: "lsh"},
          {dada: "ofg"}
          ]
        }
      })
    </script>
  </body>
</html>
10 Vue 자체 필터:orderby
(1)제한:v-for(즉 배열)에서 사용 해 야 합 니 다.
(2)세 개의 인자:
첫 번 째 인자:{String|Array|Function}검색 할 문자열
두 번 째 인자:{String}선택 가능 한 인자 order 는 결과 의 오름차 순(order>=0)또는 내림차 순(order<0)을 결정 합 니 다.기본 값 은 오름차 순 입 니 다.

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Vue      </title>
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
    <script src="../js/vue.js" type="text/javascript" charset="utf-8"></script>
  </head>
  <body>  
    <div class="test">
      <!--    -->
      <ul v-for="item in lili | orderBy 'o' 1"> <!--  kk ll oi-->
        <li>{{item}}</li>
      </ul>
      
      <ul v-for="item in lili | orderBy 'o' -1"> <!--  oi ll kk-->
        <li>{{item}}</li>
      </ul>
      
      <!--        -->
      <ul v-for="item in man | orderBy 'name' 1"> <!--  Bruce Chuck Jackie-->
        <li>{{item.name}}</li>
      </ul>
      
      <ul v-for="item in man | orderBy 'name' -1"> <!--  Jackie Chuck Bruce-->
        <li>{{item.name}}</li>
      </ul>
      
      <!--      -->
      <ul v-for="item in man | orderBy ageByTen"> <!--  Bruce Chuck Jackie-->
        <li>{{item.name}}</li>
      </ul>
    </div>
    <script type="text/javascript">
      var myVue = new Vue({
        el: ".test",
        data: {
          lili: ["oi", "kk", "ll"],
          man: [  //    man   ,    
         {
          name: 'Jackie',
          age: 62
         },
         {
          name: 'Chuck',
          age: 76
         },
         {
          name: 'Bruce',
          age: 61
         }
        ]
        },
        methods: {
          ageByTen: function () {
            return 1;
          }
        }
      })
    </script>
  </body>
</html>
본문 원본 주소:vue-filter_jb51.rar
이상 이 바로 본 고의 모든 내용 입 니 다.여러분 의 학습 에 도움 이 되 고 저 희 를 많이 응원 해 주 셨 으 면 좋 겠 습 니 다.
Python 목록 절편 용법 예시
자바 의 Arrays 라 는 도구 류 를 정말 사용 할 수 있 습 니까?

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
best100-homepage