Vue基础篇（四）之列表的即时搜索

最新推荐文章于 2023-10-19 10:34:48 发布

原创最新推荐文章于 2023-10-19 10:34:48 发布 · 382 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#Vue

Vue 同时被 2 个专栏收录

12 篇文章

订阅专栏

Vue学习

9 篇文章

订阅专栏

本文介绍如何使用Vue的计算属性实现列表的即时搜索功能。通过一个完整的示例代码，展示了如何利用计算属性过滤数组，实现输入即搜的效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

Vue基础篇（四）之列表的即时搜索

学到Vue的列表那里，发现列表的搜索是那种即时搜索的，很喜欢，所以分享一下！

列表的即时搜索，也就是通过使用计算属性来实现的，也可以通过监视来实现都可以的，我这里用的是计算属性，如果有朋友不明计算属性和监视，可以去这里查看计算属性和监视。

通过代码来讲解更直观一些，见下完整demo代码：

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<title>Vue列表搜索</title>
	<link rel="stylesheet" href="">
</head>
<body>
	<div id="test">
		<input type="text" v-model="serchname">//通过model获取输入的内容
		<ul>
           //这里的遍历数组，不再是直接遍历，而是遍历搜索匹配后的数组
			<li v-for="(item,index) in flitterarrays" :key="index">
				{{item.name}}-----{{item.age}}
			</li>
		</ul>
	</div>


	<script type="text/javascript" src="vue.js"></script>
<script type="text/javascript" >
	new Vue({
		el:'#test',
		data: {
            serchname:'',
            arrays:[
                   {name:'Tom',age:15},
                   {name:'Bob',age:18},
                   {name:'jack',age:14}
             ]

		},
		computed:{
             flitterarrays(){//计算属性中的一个方法，有返回值
                    const{serchname,arrays}=this //取出相关的值
                     let flitter  //定义最终需要返回的内容
       flitter=arrays.filter(p=>p.name.indexOf(serchname)!==-1)
           //filter是过滤器 过滤arrays数组中name与输入的内容不匹配的内容，通过indexof来匹配，如果没有匹配，则返回-1。
         //注：p=>bool类型，意思就是说前头后面跟的是布尔类型.
           return  flitter

             }   

		}
	})

</script>
</body>

</html>

亲测，有效！