Vue 2.0 Implementation 1.0 Search Filter Function Example Code

2021-08-05 08:27:14
OfStack

Vue 2.0 removes many of the more practical 1.0 filters, such as filterBy, orderBy. The official document gives the function of 1.0 search filter realized by calculating attributes, and adds the general retrieval function of case, which is relatively simple and easy to learn.


<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: ' Zhao ' }
        ] 
      },
      computed: {
        newUsers: function () {
          var that = this;
          return that.users.filter(function (user) {
            return user.name.toLowerCase().indexOf(that.name.toLowerCase()) !== -1;
          })
        }

      }
    })
  </script>
</body>