在網頁中，搜索是非常重要的一個功能，用戶可以通過搜索來快速找到自己需要的內容。在Vue中，我們可以通過點擊搜索篩選來實現這個功能，方便用戶快速搜索自己需要的內容。

首先，我們需要在Vue中定義一個搜索框和一個按鈕，通過這個按鈕來觸發搜索功能。在代碼中，我們可以使用pre標簽來展示這段代碼：

<template>
<div>
<input type="text" v-model="search">
<button @click="filterData">搜索</button>
</div>
</template>
<script>
export default {
data() {
return {
search: '',
}
},
methods: {
filterData() {
// 這里寫搜索的邏輯代碼
}
}
}
</script>

可以看到，我們通過v-model指令綁定了一個search變量來獲取輸入框中的文本內容。在按鈕被點擊時，通過filterData方法來實現搜索功能。這里的搜索邏輯代碼可以根據實際需要來實現，例如通過Ajax請求獲取服務器端的數據，并且進行篩選。

接下來，我們可以通過計算屬性來實現搜索篩選的功能，將篩選后的結果直接擺放在頁面上展示給用戶。在pre標簽中所示的代碼中，實現了一個簡單的搜索篩選邏輯：

<script>
export default {
data() {
return {
search: '',
data: [
{ name: '商品1' },
{ name: '商品2' },
{ name: '商品3' },
{ name: '商品4' },
],
}
},
computed: {
filteredData() {
if(this.search === '') return this.data;
return this.data.filter(item => item.name.includes(this.search));
}
}
}
</script>
<template>
<div>
<input type="text" v-model="search">
<button @click="filterData">搜索</button>
<div v-for="(item, index) in filteredData" :key="index">{{ item.name }}</div>
</div>
</template>

可以看到，在computed中定義了一個filteredData計算屬性，用來獲取篩選結果。如果輸入框中的內容為空，直接返回原來的數據data；否則通過filter方法來過濾出符合搜索條件的數據。

最后，在頁面中展示結果時，使用v-for指令遍歷filteredData數組，將每個元素生成一個HTML節點來展示結果。

以上就是Vue中點擊搜索篩選的功能實現，可以通過組合使用v-model、@click、computed等指令和方法來實現這個功能。搜索功能對于用戶來說非常實用，因此在網頁開發中需要多加考慮。同時，如果需要實現更加復雜的搜索邏輯，也可以通過Vue提供的多種組件來進行擴展和定制。