在
Vue中，可以
使用`
filter`
过滤数组。可以将一个函数传递给`
filter`方法，该函数将应用于
数组中的每个元素，通过该函数返回`true`或`false`的元素将被
过滤出来。
例如，假设我们有一个
数组`books`，我们要
过滤出所有价格低于50元的图书，可以
使用以下代码：
```javascript
var books = [
{ title: 'JavaScript高级程序设计', price: 99 },
{ title: '
Vue.js实战', price: 59 },
{ title: 'CSS权威指南', price: 89 },
{ title: 'HTML5权威指南', price: 49 },
];
var cheapBooks = books.
filter(function(book) {
return book.price < 50;
});
console.log(cheapBooks);
// Output: [{ title: 'HTML5权威指南', price: 49 }]
```
在上面的代码中，我们传递了一个函数作为`
filter`的第一个参数。该函数接收一个`book`参数，表示
数组中的每个元素。如果`book.price`小于50，则返回`true`，否则返回`false`。最终，我们得到了一个只包含价格低于50元的图书的新
数组`cheapBooks`。
在
Vue中，我们可以在模板中
使用过滤器来
过滤数组，例如：
```html
<ul>
<li v-for="book in books | cheap">
{{ book.title }}
</li>
</ul>
```
在上面的模板中，我们
使用了一个名为`cheap`的
过滤器来
过滤数组`books`。这个
过滤器可以在
Vue实例的`
filters`属性中定义，例如：
```javascript
new
Vue({
el: '#app',
data: {
books: [
{ title: 'JavaScript高级程序设计', price: 99 },
{ title: '
Vue.js实战', price: 59 },
{ title: 'CSS权威指南', price: 89 },
{ title: 'HTML5权威指南', price: 49 },
],
},
filters: {
cheap: function(books) {
return books.
filter(function(book) {
return book.price < 50;
});
},
},
});
```
在上面的代码中，我们定义了一个名为`cheap`的
过滤器，它接收一个`books`参数，表示要
过滤的
数组。该
过滤器内部调用`
filter`方法，
使用一个函数来
过滤出所有价格低于50元的图书，并返回
过滤后的新
数组。然后在模板中
使用`|`管道符号来调用这个
过滤器，将
过滤后的
数组渲染到页面上。
6055
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
