Vue搜索功能
知识点:v-model数据双向绑定,绑定对象是input
@keyup="seachup()"是键盘事件
菜单列表显示搜索效果图1:
菜单列表不显示,输入关键字显示菜单列表效果图2:
-
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>
-
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>
-
CSS
略…