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
   略…