其他分享
首页 > 其他分享> > Vue 简单数据筛选

Vue 简单数据筛选

作者:互联网

给大家分享一个简单的用vue实现数据筛选的代码,因为我下载了vue.js所以我是内联的,没有下载的同学可以去下载一下vue 官网

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<script src="../vue.js"></script>
		<div id="app">
			<input type="text" v-model="keyword"/>
			<div class="box" v-for="item in flist" :key="item">
				{{item}}
			</div>
		</div>
		<script type="text/javascript">
			new Vue({
				el:"#app",
				data:{
					keyword:"",
					list:["草莓","菠萝","杏","李子","西瓜","木瓜","哈密瓜","山竹","樱桃","香蕉","芒果"]
				},
				computed:{
					flist(){
						// 如果item(水果列表中变量的项)包含文字 this.keyword(搜索关键字)
						// a.includes(b)如果a包含b就返回true
						// 返回true当前水果·就保留
						return this.list.filter(item=>item.includes(this.keyword))
					}
				}
			})
		</script>
	</body>
</html>

标签:Vue,keyword,includes,item,vue,简单,筛选,true
来源: https://blog.csdn.net/qq_46032261/article/details/121050931