App下載

vue.js篩選搜索框案例分享！

猿友 2021-07-28 10:26:31 瀏覽數(shù) (3164)
反饋

喜歡使用網(wǎng)絡(luò)進(jìn)行搜索相關(guān)內(nèi)容的小伙伴們都知道只要我們輸入自己想要知道的內(nèi)容就可以彈出各種解決問題和相關(guān)內(nèi)容，那么今天就為大家?guī)恚骸皏ue.js篩選搜索框案例分享！”這個方面的相關(guān)內(nèi)容！

我們先來看看案例運(yùn)行的結(jié)果截圖：

女性搜索

女性搜索

男性搜索

男性搜索

全部內(nèi)容列表

全部內(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>

通過上面這個搜索框的小案例分享相信大家對于：“vue.js篩選搜索框案例分享！”這個方面就有所了解了吧！當(dāng)然了對于 Vue.js 這個框架的使用我們都可以在W3Cschool中進(jìn)行學(xué)習(xí)和了解！


Vue.js 框架

0 人點贊