vue2实现搜索功能(输入框中有目标数据,如果有,则在页面显示)
2022/3/30 6:22:30
本文主要是介绍vue2实现搜索功能(输入框中有目标数据,如果有,则在页面显示),对大家解决编程问题具有一定的参考价值,需要的程序猿们随着小编来一起学习吧!
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Document</title> <script src="vue.min.js"></script> <link rel="stylesheet" href="./css/style.css" /> </head> <body> <div id="app"> <div class="search-wrapper"> <input type="text" v-model="search" placeholder="请搜索" /> </div> <div class="wrapper"> <div class="card" v-for="post in filteredList"> <a v-bind:href="post.link" target="_blank"> <img v-bind:src="post.img" /> {{ post.title }} </a> </div> </div> </div> <script> class Post { constructor(title, link, img) { this.title = title; this.link = link; this.img = img; } } const app = new Vue({ el: "#app", data: { search: "", postList: [ new Post( "小猫咪", "https://unsplash.com/s/photos/cat", "./images/cat.png" ), new Post( "小狗狗", "https://unsplash.com/@joeyc", "./images/dog.png" ), new Post( "北极熊", "https://unsplash.com/@hansjurgen007", "./images/bar.png" ), new Post( "狮子", "https://unsplash.com/@hansjurgen007", "./images/lion.png" ), new Post( "小鸟", "https://unsplash.com/@eugenechystiakov", "./images/birds.png" ), new Post( "狐狸", "https://unsplash.com/@introspectivedsgn", "./images/fox.png" ), ], }, computed: { filteredList() { //使用filter过滤数组,通过includes方法查找title中是否包含search的内容 // 核心关键代码如下 return this.postList.filter((item)=>item.title.includes(this.search)) }, } }); </script> </body> </html>
这篇关于vue2实现搜索功能(输入框中有目标数据,如果有,则在页面显示)的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!
- 2024-10-04package.json 文件位置在哪?-icode9专业技术文章分享
- 2024-10-01Craco.js学习:从入门到实践指南
- 2024-10-01Create-React-App学习:入门与实践指南
- 2024-10-01CSS-in-JS学习:从入门到实践指南
- 2024-09-30JSX语法学习:从入门到初步掌握
- 2024-09-30Mock.js学习:入门教程与实战演练
- 2024-09-30React Hooks学习:从入门到实践
- 2024-09-30受控组件学习:React中的基础入门教程
- 2024-09-29JS定时器教程:初学者必看指南
- 2024-09-29JS对象教程:初学者的全面指南