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

2019-11-19 17:06:14

字体：大中小

来源：转载

供稿：网友

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导航钩子

下一篇：如何解决vue与传统jquery插件冲突