欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

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

程序员文章站 2023-09-06 16:29:24
vue2.0删除了很多1.0的比较实用的过滤器,如filterby,orderby。官方文档给了通过计算属性实现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>

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