在如今互聯網高速發展的時代，搜索引擎成為人們獲取信息的首選方式。各種網站都為用戶提供了搜索功能，給用戶提供了方便快捷的使用體驗。本文介紹如何使用Vue.js開發一個簡單的搜索欄，并顯示搜索結果。

首先，我們需要創建Vue實例，并定義一個data對象，來存儲搜索相關的變量。在data對象中定義一個searchTerm字符串表示用戶輸入的搜索關鍵字，以及一個results數組變量，表示匹配搜索關鍵字的結果。

new Vue({
el: '#app',
data: {
searchTerm: '',
results: []
}
})

接下來，我們需要創建一個input標簽，及一個button標簽，用于獲取用戶輸入的搜索關鍵字，并發起搜索請求。我們將v-model指令綁定到searchTerm變量上，該指令會自動將用戶輸入的值賦給該變量。我們使用v-on指令綁定click事件到button按鈕上，當用戶點擊該按鈕時觸發搜索方法。在搜索方法中，我們發送Ajax請求，獲取搜索結果，并將結果存儲在results數組中。

Search
{{ result }}
new Vue({
el: '#app',
data: {
searchTerm: '',
results: []
},
methods: {
search: function () {
var self = this;
$.ajax({
url: '/api/search',
data: { q: self.searchTerm },
success: function (data) {
self.results = data.items;
},
error: function () {
alert('error');
}
});
}
}
})

最后，我們需要在HTML中使用v-for指令循環遍歷結果數組，并將結果展示在用戶面前。v-for指令用于遍歷數組或對象，以便展示數據。在我們的案例中，我們使用v-for指令遍歷results數組，并使用{{ result }}綁定每個結果。{{ result }}表示使用了雙大括號語法，該語法可以在DOM中插入變量。

總之，Vue.js是一個非常好的前端框架，它可以提高網站的響應速度，同時還可以減少頁面的代碼量以及提高可復用性。本文我們介紹了如何使用Vue.js實現一個簡單的搜索功能，它基于Ajax請求，用v-model指令綁定搜索關鍵字，以及使用v-for指令循環顯示結果。這個開發過程也展示了Vue.js的基本原理。