主页 / 网络编程 /

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

网络编程 2021-07-04 18:31www.168986.cn编程入门
本篇文章主要介绍了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: '赵' }
        ] 
      },
      puted: {
        newUsers: function () {
          var that = this;
          return that.users.filter(function (user) {
            return user.name.toLowerCase().indexOf(that.name.toLowerCase()) !== -1;
          })
        }

      }
    })
  </script>
</body>

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

上一篇：非常实用的vue导航钩子 下一篇：如何解决vue与传统jquery插件冲突

编程语言

Copyright © 2016-2025 www.168986.cn 狼蚁网络 版权所有 Power by