查詢表格是web開發中常用的功能之一，Vue作為一款流行的JavaScript框架，也提供了方便的查詢表格內容的API。

在Vue中，我們通常會使用v-for指令來循環遍歷數據，并將數據渲染成表格的形式。如果需要查詢表格中的某些內容，我們可以使用filter()方法對數據進行過濾。

<template>
<div>
<input type="text" v-model="searchKey" />
<table>
<thead>
<tr>
<th>姓名</th>
<th>性別</th>
<th>年齡</th>
</tr>
</thead>
<tbody>
<tr v-for="person in filteredData" :key="person.id">
<td>{{ person.name }}</td>
<td>{{ person.gender }}</td>
<td>{{ person.age }}</td>
</tr>
</tbody>
</table>
</div>
</template>
<script>
export default {
data() {
return {
searchKey: '',
data: [
{ id: 1, name: '張三', gender: '男', age: 20 },
{ id: 2, name: '李四', gender: '女', age: 18 },
{ id: 3, name: '王五', gender: '男', age: 25 },
{ id: 4, name: '趙六', gender: '女', age: 22 },
]
}
},
computed: {
filteredData() {
return this.data.filter(person =>{
const searchKey = this.searchKey.toLowerCase();
return person.name.toLowerCase().includes(searchKey) ||
person.gender.toLowerCase().includes(searchKey) ||
person.age.toString().includes(searchKey)
})
}
}
}
</script>

在上面的代碼中，我們用v-model指令綁定了一個變量searchKey，這個變量用于獲取用戶輸入的查詢關鍵字。然后我們在computed屬性中定義了filteredData方法，用于返回過濾后的數據。在該方法中，我們使用filter()方法來過濾數據，保留符合搜索關鍵字的數據項。

在這個例子中，我們使用String.prototype.includes()方法來判斷搜索關鍵字是否包含在數據項的某個字段中。這個方法會返回true或false。

最后，我們將過濾后的數據通過v-for指令渲染在表格中。數據綁定以及過濾都會在數據發生變化時自動更新。