搜索商品是在線購物的重要功能之一，用戶可以通過輸入關(guān)鍵詞來查找自己需要的商品。Vue.js是一款流行的前端框架，可以方便、快捷地實(shí)現(xiàn)搜索功能，為用戶提供更好的用戶體驗(yàn)和更高效的搜索結(jié)果。下面我們來詳細(xì)介紹Vue.js如何實(shí)現(xiàn)搜索商品。 首先，在HTML中設(shè)置搜索框和商品列表：

<div id="app">
<input type="text" v-model="keyword" placeholder="請輸入搜索關(guān)鍵字">
<ul>
<li v-for="item in goodsList">{{ item.name }} - {{ item.price }}元</li>
</ul>
</div>

上面的代碼中，我們通過v-model指令將輸入框的值與Vue實(shí)例中的keyword屬性綁定起來。在接下來的實(shí)現(xiàn)中，我們會用到這個屬性來進(jìn)行搜索。同時，商品列表展示部分使用了v-for指令，可以方便地展示商品列表中的每一個商品。接下來創(chuàng)建Vue實(shí)例，實(shí)現(xiàn)搜索功能。

var app = new Vue({
el: '#app',
data: {
keyword: '',
goodsList: [
{ name: '商品1', price: 100 },
{ name: '商品2', price: 200 },
{ name: '商品3', price: 300 },
{ name: '商品4', price: 400 },
{ name: '商品5', price: 500 }
]
},
computed: {
filterGoods: function() {
var keyword = this.keyword.trim().toLowerCase();
if (keyword) {
return this.goodsList.filter(function(item) {
return item.name.toLowerCase().indexOf(keyword) >-1;
});
} else {
return this.goodsList;
}
}
}
});

在Vue實(shí)例中，我們定義了一個keyword屬性和一個goodsList屬性，并通過computed屬性創(chuàng)建了一個用于過濾商品的計(jì)算屬性filterGoods。其中，filterGoods的實(shí)現(xiàn)邏輯如下： 首先將用戶輸入的關(guān)鍵字去掉前后空格，并轉(zhuǎn)為小寫字母。 然后通過filter方法過濾出商品列表中名稱中包含關(guān)鍵字的商品。 如果沒有關(guān)鍵字，直接返回原來的商品列表。 接下來，我們將computed屬性中計(jì)算出來的商品列表綁定到頁面上。

<ul>
<li v-for="item in filterGoods">{{ item.name }} - {{ item.price }}元</li>
</ul>

最后，我們添加一個效果來展示搜索結(jié)果的狀態(tài)。如果沒有搜索到任何商品，給出相應(yīng)的提示。

<p v-if="filterGoods.length == 0">沒有搜索到相關(guān)商品！</p>

這樣，我們就完成了使用Vue.js實(shí)現(xiàn)搜索商品的功能。使用Vue.js可以很方便地實(shí)現(xiàn)這樣的功能，提高了用戶體驗(yàn)和網(wǎng)站效率。這也展示了Vue.js在前端開發(fā)中的強(qiáng)大功能。