vue 搜索功能

      <!-- 订单列表 --> <template>   <div class="pariculasr">     <fh :Text="{...propsText}"></fh>     <van-row type="flex">       <van-col span="24">         <van-search v-model="value" show-action placeholder="请输入时间、地点、人员等信息" @search="onSearch">           <template #action>             <div @click="onSearch">搜索</div>           </template>         </van-search>       </van-col>     </van-row>   <div v-if="list.length>0"> <van-row type="flex" class="ME-box BOXshadow bg mT" v-for="item in list" :key="item.id">       <van-col>         <van-card           :tag="item.tag"           :title="('目的地 : '+item.title)"           :desc="('提交人 : '+item.desc) "           :thumb="item.thumb"         >           <template #tags>             <van-tag plain type="danger">订单时间 : {{item.time}}</van-tag>           </template>           <template #footer>             <van-button size="mini" @click="xqyem(item.id)">{{item.text1}}</van-button>             <van-button size="mini" @click="qxdd(item.id)">{{item.text2}}</van-button>           </template>         </van-card>       </van-col>     </van-row>   </div>   <div v-else>     <van-row type="flex" class="ME-box BOXshadow bg mT" v-for="item in mydae" :key="item.id">       <van-col>         <van-card           :tag="item.tag"           :title="('目的地 : '+item.title)"           :desc="('提交人 : '+item.desc) "           :thumb="item.thumb"         >           <template #tags>             <van-tag plain type="danger">订单时间 : {{item.time}}</van-tag>           </template>           <template #footer>             <van-button size="mini" @click="xqyem(item.id)">{{item.text1}}</van-button>             <van-button size="mini" @click="qxdd(item.id)">{{item.text2}}</van-button>           </template>         </van-card>       </van-col>     </van-row>     </div>   </div> </template>    <script> //这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等） //例如：import 《组件名称》 from '《组件路径》'; import fh from "@/components/tabbar/fh"; import { Dialog } from "vant"; export default {   name: "",   //import引入的组件需要注入到对象中才能使用   components: {     fh,   },   data() {     //这里存放数据     return {       propsText: {         num: 1,         Titletext: "订单列表",       },       value:'',       // 搜索后的展示数据       list: [],        // 原本展示数据       mydae: [         {           id: "0",           tag: "待接单",           title: "广州市越秀区建设大马路规划院",           desc: "李市民 ",           thumb: "https://img.yzcdn.cn/vant/ipad.jpeg",           time: "10:00",           text1: "详情",           text2: "取消订单",         },         {           id: "4",           tag: "已接单",           title: "广州市越秀区建设大马路规划院",           desc: "李白 ",           thumb: "https://img.yzcdn.cn/vant/ipad.jpeg",           time: "09:00",           text1: "详情",           text2: "取消订单",         },         {           id: "2",           tag: "待接单",           title: "广州市越秀区建设大马路规划院",           desc: "李老头 ",           thumb: "https://img.yzcdn.cn/vant/ipad.jpeg",           time: "10:15",           text1: "详情",           text2: "取消订单",         },         {           id: "1",           tag: "已接单",           title: "广州市越秀区建设大马路规划院",           desc: "李逵 ",           thumb: "https://img.yzcdn.cn/vant/ipad.jpeg",           time: "10:11",           text1: "详情",           text2: "取消订单",         },       ],     };   },   //监听属性 类似于data概念   computed: {},   //监控data中的数据变化   watch: {},   //方法集合   methods: {     onClickLeft() {       this.$router.go(-1);     },     xqyem(id) {       this.$router.push({ path: "/xqym", query: { id: id } });       console.log(id);     },     qxdd(id) {       console.log(id);       Dialog.confirm({         title: "订单信息",         message: "您确定呀取消订单吗？",       })         .then(() => {           // on confirm           console.log("确定");         })         .catch(() => {           console.log("取消");           // on cancel         });     },     onSearch(){       console.log(this.value)       let  search = this.value        this.list = this.mydae.filter(function(product) {           // 每一项数据           console.log(product)           return Object.keys(product).some(function(key) {           //   // 每一项数据的参数名             // console.log(key)           return (               String(product[key])                 // toLowerCase() 方法用于把字符串转换为小写。                 .toLowerCase()                 // indexOf() 方法可返回某个指定的字符串值在字符串中首次出现的位置。                 .indexOf(search) > -1             );                });         });     }   },   //生命周期 - 创建完成（可以访问当前this实例）   created() {},   //生命周期 - 挂载完成（可以访问DOM元素）   mounted() {},   beforeCreate() {}, //生命周期 - 创建之前   beforeMount() {}, //生命周期 - 挂载之前   beforeUpdate() {}, //生命周期 - 更新之前   updated() {}, //生命周期 - 更新之后   beforeDestroy() {}, //生命周期 - 销毁之前   destroyed() {}, //生命周期 - 销毁完成   activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发 }; </script> <style  scoped> </style>