Vue是一款基于MVVM模式的JavaScript框架，他允许我们通过数据驱动视图的方式快速开发高性能的Web应用。

在Vue中，我们经常需要对数据进行筛选和排序，这些操作可以帮助我们更加精准地展示数据，提高用户体验。在本文中，我们将介绍如何使用Vue实现数据筛选按钮。

首先，我们需要准备一个数据源，我们可以使用Vue提供的数据对象或者手动创建一个JavaScript数组来充当数据源。

data() {
return {
items: [
{ id: 1, name: 'apple', price: 2 },
{ id: 2, name: 'banana', price: 3 },
{ id: 3, name: 'cherry', price: 5 },
{ id: 4, name: 'orange', price: 4 },
{ id: 5, name: 'pear', price: 1 },
],
filter: '',
}
}

在上述代码中，我们定义了一个items数组，用来存放商品的信息，并且添加了一个filter属性，用于存放筛选条件。

接下来，我们可以在Vue的模板中添加一个筛选按钮，当用户点击按钮时，Vue可以根据筛选条件来进行筛选操作。

<button @click="filterItems">Filter</button>

在上述代码中，我们使用Vue提供的@click指令来绑定按钮的点击事件，并调用filterItems方法。

接着，我们需要在Vue的methods属性中定义filterItems方法，代码如下所示：

filterItems() {
const regexp = new RegExp(this.filter, 'i');
this.items = this.items.filter(item =>regexp.test(item.name));
}

在上述代码中，我们首先构造一个正则表达式，用来匹配商品名称中的字符，然后使用数组的filter方法，根据正则表达式来过滤掉不符合条件的商品，最后重新赋值给items数组。

通过上面的介绍，我们可以发现Vue非常适合用来进行数据筛选操作，而且代码十分简单易懂，可以大大提高开发效率，为我们的开发工作带来极大的便捷。