Vue 2.0 1.0 검색 필터 기능 인 스 턴 스 코드 구현

1240 단어 vue수색 하 다.
Vue 2.0 은 filter By,orderby 와 같은 실 용적 인 필 터 를 많이 삭제 했다.공식 문 서 는 계산 속성 을 통 해 1.0 검색 필터 기능 을 실 현 했 고 대소 문자 유 니 버 설 검색 기능 을 추 가 했 습 니 다.간단 합 니 다.배 워 보 세 요.

<body>
  <div class="app">
    <input type="text" v-model="name">
    <ul>
      <li v-for="user in newUsers" >
        {{ user.name }}
      </li>
    </ul>
  </div>
  <script>
    new Vue({
      el: '.app',
      data: {
        name: '',
        users: [
          { name: 'Bruce' },
          { name: 'Chuck' },
          { name: 'Jackie' },
          { name: ' ' }
        ] 
      },
      computed: {
        newUsers: function () {
          var that = this;
          return that.users.filter(function (user) {
            return user.name.toLowerCase().indexOf(that.name.toLowerCase()) !== -1;
          })
        }

      }
    })
  </script>
</body>
이상 이 바로 본 고의 모든 내용 입 니 다.여러분 의 학습 에 도움 이 되 고 저 희 를 많이 응원 해 주 셨 으 면 좋 겠 습 니 다.
Android 그림 의 3 급 캐 시 메커니즘 인 스 턴 스 분석
Android 에서 Lambda 표현 식 사용 실례 상세 설명

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

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