vue 写搜索效果！

最新推荐文章于 2024-06-01 15:46:07 发布

邢帥兵_

最新推荐文章于 2024-06-01 15:46:07 发布

阅读量215

点赞数 1

分类专栏： vue js html 文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/m0_64875238/article/details/126981733

版权

js 同时被 3 个专栏收录

41 篇文章 28 订阅

订阅专栏

vue

20 篇文章 43 订阅

订阅专栏

html

14 篇文章 0 订阅

订阅专栏

效果图

注意！！！需要外引入 vue 文件！别忘咯

代码如下

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<div id="app">
			<h1>搜索水果</h1>
			<input type="text" v-model="keyword">
			<div v-for="(item,index) in filst" :key="index">{{item}}</div>
		</div>
	</body>
	<script src="./js/vue.js"></script>
	<script>
		new Vue({
			el: "#app",
			computed: {
				filst() {
					if (this.keyword.trim() === "") {
						return this.list;
					} else {
						var a = this.list.filter(item => {
							if (item.indexOf(this.keyword) != -1) {
								return true;
							} else {
								return false;
							}
						})
						return a;
					}
				}
			},
			data() {
				return {
					keyword: "",
					list: ["苹果", "沙果", "海棠", "野樱莓", "枇杷", "欧楂", "山楂", "香梨", "雪梨", "温柏", "蔷薇果", "花楸", "杏", "樱桃", "桃",
						"水蜜桃", "油桃", "蟠桃", "李子", "梅子（青梅）", "西梅", "白玉樱桃 ", "黑莓", "覆盆子", "云莓", "罗甘莓", "白里叶莓", "草莓",
						"菠萝莓", "橘子", "砂糖桔", "橙子", "柠檬", "青柠", "柚子", "金桔", "葡萄柚", "香橼", "佛手", "指橙", "黄皮果", "哈密瓜",
						"香瓜", "白兰瓜", "刺角瓜"
					]
				}
			}

		})
	</script>
</html>