Vue搜索功能

拼搏现实的明天。 2021-09-18 19:40 495阅读 0赞

# Vue搜索功能 #

**知识点：v-model数据双向绑定，绑定对象是input**  
**@keyup="seachup()"是键盘事件**  
菜单列表显示搜索效果图1：  
![在这里插入图片描述][20190408202023653.gif]  
菜单列表不显示，输入关键字显示菜单列表效果图2：  
![在这里插入图片描述][20190410110706895.gif]

1.  **HTML**
    
        <template>
        
        	<div id="search">
        	<header>
        		<div class="header_input">
        			
        			<input type="text" placeholder="请输入菜名" v-model="search">
        		</div>
        	</header>
        
        	<div id="content">
        		<ul>
        			
        			
        			
        			
        			
        			<li v-for="item in listr">		
        				<router-link :to="'MenuDetails/'+item.caidan_id">
        					<img :src="url+'/'+item.caidan_img" alt="">
        					<p><b>{
             {item.caidan_name}}</b></p>
        					<p>¥{
             {item.caidan_jiag}}</p>
        					<p>已售：{
             {item.caidan_flas}}份</p>
        				</router-link>
        			</li>
        					</ul>
        				</div>
        		</div>
        </template>
2.  **JS**
    
        <script>
        	import config from "@/metole/config.js"
        	export default{
        		data(){
        			return{
        				list:[],
        				listr:[],
        				search:'',	//初始化数据为空
        				url:config.url
        	    	}
        		},
        		methods:{
        			getData(){
        				//使用get方式获取数据库数据
        				this.$http.get(this.url+"phpvue/web/caidan.php").then((response)=>{
        					this.list=response.body;
        				},(err)=>{
        					console.log(err);
        				})
        			},
        			// 搜索功能	要求2：菜单列表不显示，输入关键字显示菜单列表
        			seachup(){						//第一步：键盘事件：input输入文本触发
        				var str = {					//第二步：定义输入框的数据保存给str
        					search:this.search
        				}
        				if(this.search!=""){		//第三步：判断输入框不等于空，则执行下面代码
        					this.$http.post(this.url+"phpvue/web/search.php",str,{emulateJSON:true}).then((success)=>{//第四步：使用post方式获取数据库数据并转换为JSON数据
        						this.listr=success.body;	//第五步：取body里面数据保存给listr;做为数据源
        						console.log(success);
        					},(err)=>{
        						console.log(err);
        					})
        				}
        
        			}
        	    		},
        	    		created(){
        			this.getData();
        		},
        		computed: {
        			//搜索功能函数
        			//搜索功能	// 要求1：菜单列表显示搜索
        			listr: function() {	//数据源定义一个函数
        				var search = this.search;	//定义search保存inout输入的数据
        				if (search) {				//判断search里面的数据
        					return this.list.filter(function(product) {	//这里返回的list是通过get获取的数据
        						return Object.keys(product).some(function(key){
        							return String(product[key]).toLowerCase().indexOf(search) > -1
        						})
        					})
        				}
        				return this.list;	//返回list数据
        			},
        	    		}
        	    	}
        </script>
3.  CSS  
    略…

[20190408202023653.gif]: /images/20210724/6d4bcd972f70451fb64267282c10015b.png
[20190410110706895.gif]: /images/20210724/7d9b815777de43aeb6b383f4f15325fb.png