当前位置： 移动技术网 > IT编程>脚本编程>vue.js > Vue2.0实现1.0的搜索过滤器功能实例代码

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

2018年05月01日  | 移动技术网IT编程  | 我要评论

ferras alquasi,小英雄的故事,王东锴简历

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>

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持移动技术网。

您可能感兴趣的文章:

如对本文有疑问，请在下面进行留言讨论，广大热心网友会与你互动！！ 点击进行留言回复

相关文章:

验证码：
最近更新的文章
大家感兴趣的文章
移动技术网