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>

本文Vue2.0如何实现1.0的搜索过滤器功能实例代码到此结束。自古以来学有建树的人,都离不开一个苦字。小编再次感谢大家对我们的支持!

标签: 实现