笔记：vue应用之搜索框功能实现

最新推荐文章于 2024-08-29 14:05:46 发布

中原猪精

最新推荐文章于 2024-08-29 14:05:46 发布

阅读量740

点赞数 1

分类专栏： vue_study 文章标签： vue javascript

本文链接：https://blog.csdn.net/qq_42257997/article/details/106238638

版权

vue_study 专栏收录该内容

18 篇文章 0 订阅

订阅专栏

列表渲染+计算属性实现搜索框功能

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		<div id="box">
           <!-- v-model获取输入框值，双向绑定-->
			<input type="text" v-model="mytext"/>
			
			<ul>
				<li v-for="data in computedDataList">
				{{data}}
				</li>
			</ul>
		</div>
		
		<script type="text/javascript">
			var vm = new Vue({
				el:"#box",
				
				data:{
					dataList:['a','aa','abb','bbb','ccc','ddd'],
					mytext:''
				},
				
				computed:{
					computedDataList:function() {
						return this.dataList.filter(item=>item.indexOf(this.mytext)>-1)
					}
				}
			})
		</script>
	</body>
</html>