vue实现搜索功能

最新推荐文章于 2024-12-23 18:00:59 发布

温L

最新推荐文章于 2024-12-23 18:00:59 发布

阅读量1.6k

点赞数

文章标签： html 前端 vue.js

本文链接：https://blog.youkuaiyun.com/lwf0829/article/details/121516743

版权

本文详细介绍了如何在Vue.js应用中实现搜索功能，从数据处理到界面交互，涵盖了Vue组件设计、数据绑定、事件监听等多个关键步骤，帮助开发者提升前端搜索体验。

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

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<div id="app">
			<input type="text" v-model="keyword" placeholder="输入关键字" />
			<div class="list">
				<div class="item" v-for="item in fFruit" :key="item">
					{{item}}
				</div>
			</div>
		</div>
	</body>
	<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
	<script type="text/javascript">
		new Vue({
			el:"#app",
			data(){
				return{
					keyword:"",
					fruit:[
						"苹果","沙果","海棠","野樱莓","枇杷","欧楂","山楂","香梨",
						"雪梨 ","温柏","蔷薇果","花楸","杏","樱桃","桃","水蜜桃",
						"油桃","蟠桃","李子","梅子","西梅","白玉樱桃 ","黑莓",
						"覆盆子","云莓","罗甘莓","白里叶莓","草莓","菠萝莓","橘子",
						"砂糖桔","橙子","柠檬","青柠","柚子","金桔","葡萄柚","香橼",
						"佛手","指橙","黄皮果","哈密瓜","香瓜","白兰瓜","刺角瓜"
					]
				}
			},
			computed:{
				"fFruit"(){
					// 如果关键字为空，返回所有的水果
					if(this.keyword==""){
					return this.fruit;
				}else{
					// 当Frui里面某一项文字包含keyword文字那么就把当前数据保留
					// filter过滤 返回为真保留，为false就过滤掉
					
					return this.fruit.filter(item=>{
						return item.includes(this.keyword)
					})
				}
				}
				
			}
		})
	</script>
</html>

结果：