Vue2.0实现1.0的搜索过滤器功能实例代码

Vue2.0删除了很多1.0的比较实用的过滤器,如filterBy,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>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持智伍应用。

您可能感兴趣的文章:

  • Vue.js每天必学之过滤器与自定义过滤器
  • Vue.js -- 过滤器使用总结
  • 详解Vue2.0里过滤器容易踩到的坑
  • Vue.js学习之过滤器详解
  • 详解vue过滤器在v2.0版本用法
  • vue数字类型过滤器的示例代码
  • vue.js中过滤器的使用教程
  • 详解VUE2.X过滤器的使用方法
  • Vue 过滤器filters及基本用法
  • Vue2.0系列之过滤器的使用