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

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

<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指令綁定了一個(gè)變量searchKey，這個(gè)變量用于獲取用戶輸入的查詢關(guān)鍵字。然后我們?cè)赾omputed屬性中定義了filteredData方法，用于返回過濾后的數(shù)據(jù)。在該方法中，我們使用filter()方法來過濾數(shù)據(jù)，保留符合搜索關(guān)鍵字的數(shù)據(jù)項(xiàng)。

在這個(gè)例子中，我們使用String.prototype.includes()方法來判斷搜索關(guān)鍵字是否包含在數(shù)據(jù)項(xiàng)的某個(gè)字段中。這個(gè)方法會(huì)返回true或false。

最后，我們將過濾后的數(shù)據(jù)通過v-for指令渲染在表格中。數(shù)據(jù)綁定以及過濾都會(huì)在數(shù)據(jù)發(fā)生變化時(shí)自動(dòng)更新。