在電商網站中，商品查詢是非常重要的功能之一。為了提高用戶的查詢效率，使用Vue框架可以讓我們更高效地實現該功能。

在Vue中，我們可以使用computed屬性計算過濾后的商品列表。首先，我們需要定義一個包含所有商品信息的數組，例如：

var products = [
{ name: "iPhoneX", category: "手機", price: "7999" },
{ name: "MacBook Pro", category: "電腦", price: "9999" },
{ name: "iPad Pro", category: "平板", price: "5999" }
];

接著，我們可以在Vue實例中定義一個搜索關鍵字和一個過濾函數：

var app = new Vue({
el: '#app',
data: {
search: '',
products: products
},
computed: {
filteredProducts: function() {
var self = this;
var result = [];
this.products.forEach(function(product) {
if (product.name.indexOf(self.search) !== -1) {
result.push(product);
}
});
return result;
}
}
});

在上面的代碼中，當用戶在頁面中輸入搜索關鍵字時，computed屬性filteredProducts會自動計算出過濾后的商品列表，并展示在頁面上。通過computed屬性的特性，每次搜索關鍵字發生變化時，頁面會自動更新。

除了通過搜索關鍵字過濾商品，我們還可以通過下拉菜單選擇商品分類，再進行過濾。

首先，我們需要在Vue實例中添加一個選項列表：

var app = new Vue({
el: '#app',
data: {
search: '',
selectedCategory: '',
categories: ['手機', '電腦', '平板'],
products: products
},
...
});

接著，我們需要根據選中的分類，過濾商品列表。我們可以添加一個單選框，當用戶選擇不同的分類時，自動更新selectedCategory屬性：

{{ category }}

最后，我們需要在computed屬性filteredProducts中加入對分類的判斷：

computed: {
filteredProducts: function() {
var self = this;
var result = [];
this.products.forEach(function(product) {
if (product.name.indexOf(self.search) !== -1) {
if (self.selectedCategory === '' || product.category === self.selectedCategory) {
result.push(product);
}
}
});
return result;
}
}

以上代碼中，當selectedCategory屬性為空時，不進行分類過濾；否則只展示選擇的分類對應的商品。

綜上所述，使用Vue框架根據商品查詢可以大大提高搜索效率，讓用戶更好地體驗到電商網站的服務。