Vue搜索功能

Vue搜索功能

知识点：v-model数据双向绑定，绑定对象是input
@keyup="seachup()"是键盘事件
菜单列表显示搜索效果图1：

菜单列表不显示，输入关键字显示菜单列表效果图2：

1. HTML

   <template>
   
   	<div id="search">
   	<header>
   		<div class="header_input">
   			<!-- 绑定search并在data定义值为空 -->
   			<input type="text" placeholder="请输入菜名" v-model="search">
   		</div>
   	</header>
   
   	<div id="content">
   		<ul>
   			<!-- 搜索功能	要求1：菜单列表显示搜索;渲染数据 -->
   			<!-- <li v-for="item in listr">	语法item是数据迭代的别名;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> -->
   			
   			<!-- 搜索功能	要求2：菜单列表不显示，输入关键字显示菜单列表 -->
   			<!-- 语法item是数据迭代的别名;listr是源数据数组 -->
   			<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
   略…