免費(fèi)AI編程助手
喜歡使用網(wǎng)絡(luò)進(jìn)行搜索相關(guān)內(nèi)容的小伙伴們都知道只要我們輸入自己想要知道的內(nèi)容就可以彈出各種解決問題和相關(guān)內(nèi)容，那么今天就為大家?guī)恚骸皏ue.js篩選搜索框案例分享！”這個(gè)方面的相關(guān)內(nèi)容！
我們先來看看案例運(yùn)行的結(jié)果截圖：
女性搜索
男性搜索
全部?jī)?nèi)容列表
當(dāng)然除了運(yùn)行結(jié)果的截圖我們直接來看看相關(guān)的代碼，如下所示：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>篩選小案例</title>
</head>
<body>
<div id="app">
<input type="text" v-model="inputName">
<button @click="filterByName = inputName">搜索</button>
<br>
性別:
<input type="radio" value="" name="gender" v-model="filterByGender">全部
<input type="radio" value="男" name="gender" v-model="filterByGender">男
<input type="radio" value="女" name="gender" v-model="filterByGender">女
<br>
<br>
<table>
<thead>
<th>id</th>
<th>姓名</th>
<th>性別</th>
</thead>
<tbody>
<tr v-for="item in filterUsers">
<td>{{item.id}}</td>
<td>{{item.name}}</td>
<td>{{item.gender}}</td>
</tr>
</tbody>
</table>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
new Vue({
el: '#app',
data: {
filterByName: '',
filterByGender: '',
inputName: '',
users: [{
id: 1,
name: 'Jack',
gender: '男'
},
{
id: 2,
name: 'abc',
gender: '女'
},
{
id: 3,
name: 'vaxc',
gender: '男'
},
{
id: 4,
name: 'awe2',
gender: '女'
},
{
id: 5,
name: 'ave',
gender: '男'
}
]
},
computed: {
filterUsers() {
return this.users.filter(u => u.name.includes(this.filterByName) && u.gender.includes(this
.filterByGender))
}
}
})
</script>
</body>
</html>
通過上面這個(gè)搜索框的小案例分享相信大家對(duì)于：“vue.js篩選搜索框案例分享！”這個(gè)方面就有所了解了吧！當(dāng)然了對(duì)于 Vue.js 這個(gè)框架的使用我們都可以在W3Cschool中進(jìn)行學(xué)習(xí)和了解！
