vue filterby原理
Vue的filterBy指令是Vue.js框架中非常重要的一部分，它可以方便地对数组进行筛选和排序。当Vue中使用v-for指令遍历一个数组时，我们可以使用filterBy指令对其进行过滤，以满足我们的需求。
filterBy指令的基本用法如下所示：
<div v-for="item in items | filterBy 'keyword'">
{{ item }}
</div>上面的代码中，我们使用filterBy指令对数组items进行了筛选，只显示符合搜索关键字的元素。filterBy的第一个参数可以是修改器，如“true”（升序）或“false”（降序），也可以是一个属性名称或一个JavaScript函数。
filterBy指令的实现原理很简单：它通过全局过滤器来实现数组的筛选和排序。当我们给数组添加一个filterBy过滤器时，Vue将会遍历数组中的每一个元素并将其与指定的条件进行匹配，然后将匹配的结果返回给模板。
下面是一个简单的例子：
Vue.filter('searchFor', function(value, keyword) {
var results = [];
for (var i = 0; i < value.length; i++) {
var item = value[i];
if (item.title.indexOf(keyword) !== -1) {
results.push(item);
}
}
return results;
});
new Vue({
el: '#app',
data: {
items: [
{ title: 'apple' },
{ title: 'banana' },
{ title: 'orange' }
],
keyword: ''
}
});在上面的代码中，我们定义了一个名为“searchFor”的全局过滤器，它接受两个参数：value和keyword。接着，在Vue实例中，我们将items数组与keyword绑定起来，然后在模板中使用filterBy指令来过滤items数组：
<ul>
<li v-for="item in items | searchFor keyword">
{{ item.title }}
</li>
</ul>在上面的代码中，我们将items数组用filterBy指令过滤出符合关键字的元素，然后在模板中使用v-for指令遍历过滤后的数组，并显示每个元素的标题。
总之，filterBy指令是Vue.js框架中非常有用和方便的指令之一。通过使用filterBy指令，我们可以非常容易地遍历和过滤数组，并将数组的元素按照指定的顺序排序。