要實現一個基本的Vue搜索引擎功能,你可以按照以下步驟進行操作:
創建一個Vue組件,用于包含搜索引擎的相關功能。可以使用Vue CLI創建一個新的Vue項目,并在該項目中創建一個組件。
在組件的data中定義一個用于存儲搜索結果的數組。
data() {
return {
searchResults: []
}
}
<template>
<div>
<input type="text" v-model="searchQuery" placeholder="請輸入搜索關鍵字">
<button @click="search">搜索</button>
<ul>
<li v-for="result in searchResults" :key="result.id">{{ result.title }}</li>
</ul>
</div>
</template>
methods: {
search() {
// 發送請求到服務器
// 獲取搜索結果
this.searchResults = [
{ id: 1, title: '搜索結果1' },
{ id: 2, title: '搜索結果2' },
{ id: 3, title: '搜索結果3' }
];
}
}
new Vue({
el: '#app',
render: h => h(App)
});
這樣,當用戶在搜索框中輸入關鍵字并點擊搜索按鈕時,會觸發search方法,從服務器獲取搜索結果,并將搜索結果展示在頁面上。你可以根據實際需求來調整和擴展這個基礎功能。