Vue 利用filter和match实现多条件模糊查询

最新推荐文章于 2023-10-18 10:59:02 发布

写bug断了电

最新推荐文章于 2023-10-18 10:59:02 发布

阅读量2.5k

点赞数 5

分类专栏： Vue

本文链接：https://blog.csdn.net/fyydashen/article/details/109097389

版权

Vue 专栏收录该内容

27 篇文章 0 订阅

订阅专栏

运行截图：

复制下面代码，直接可以运行

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>博客列表</title>
		<script src="https://unpkg.com/vue/dist/vue.js"></script>
		<style>
			#show-blogs{
				max-width: 800px;
				margin: 0 auto;
			}
			
			.single-blog{
				padding: 20px;
				margin: 20px 0;
				box-sizing: border-box;
				background: #eee;
				border: 1px dotted #aaa;
			}
			
			input[type="text"]{
				padding: 8px;
				width: 100%;
				box-sizing: border-box;
			}
		</style>
	</head>
	<body>
		<div id="show-blogs">
			<h1>博客总览</h1>
			<input type="text" v-model="search.title" placeholder="Search title" />
			<input type="text" v-model="search.content" placeholder="Search content" />
			<div v-for="(blog,index) in filteredBlogs" :key="index" class="single-blog">
				<h2>{{blog.title}}</h2>
				<article>{{blog.content}}</article>
			</div>
		</div>
		<script>
			var vm = new Vue({
				el: '#show-blogs',
				data: {
					search: {
						title: "",
						content: ""
					},
					blogs: [{
						title: '测试a',
						content: "content1"
					}, {
						title: '测试a',
						content: "content2"
					}, {
						title: '测试a',
						content: "content2"
					}, {
						title: '测试b',
						content: "content3"
					}, {
						title: '测试b',
						content: "content3"
					}, {
						title: '测试b',
						content: "content3"
					}]
				},
				computed: {
					filteredBlogs() {
						return this.blogs.filter(keywords => {
							return keywords.title.match(this.search.title) && keywords.content.match(this.search.content);
						})
					}
				},
			})
		</script>
	</body>
</html>