vue 中通过input 输入框进行过滤模糊查询

最新推荐文章于 2026-03-27 02:58:52 发布

原创最新推荐文章于 2026-03-27 02:58:52 发布 · 1.3k 阅读

5 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#html5 #vue

JS 同时被 3 个专栏收录

30 篇文章

订阅专栏

VUE

10 篇文章

订阅专栏

HTML

6 篇文章

订阅专栏

这篇博客展示了如何在 Vue.js 中实现一个简单的搜索功能。通过输入框的 v-model 绑定搜索关键字，利用 computed 属性过滤列表数据，根据 name 属性是否包含搜索关键字来动态显示表格内容。示例代码使用了 Vue 的 v-for 指令遍历过滤后的数据，并提供了两种不同的数据过滤方法：一种是传统的函数方法，另一种是 ES6 的箭头函数表达式。博客深入探讨了 Vue 中的数据绑定和计算属性的应用。

<template>
  <div>
     <input type="text" v-model="searchId" placeholder="搜索">
     <table class="tab">
       <tr>
         <th>序号</th>
         <th>名字</th>
         <th>时间</th>
       </tr>        //遍历这里用newlist , 不要用list; 切记!!!!!
       <tr v-for="(item,index) in newlist" :key="index">
         <td>{{item.id}}</td>
         <td>{{item.name}}</td>
         <td>{{item.ctime}}</td>
       </tr>
     </table>
  </div>
 </template>
 <script>
  export default {
    data () {
      return {
         searchId:"",
         list:[
          {id:1,name:"cc",ctime:new Date()},
          {id:2,name:"zs",ctime:new Date()},
          {id:3,name:"ss",ctime:new Date()}
        ],
      }
    },
    computed:{
        newlist(){
     //1. 常规做法
     //     var that=this
     //     function iscontainer(value){
     //       return  value.name.indexOf(that.searchId)!==-1
     //     }
     //     var temlist=this.list.filter(iscontainer)
     //     iscontainer是一个函数，value就是list中的每一项的值,通过判断是否包含来来过滤数据内容
     //     return temlist
     //    }
     //2.es6做法 
     // filter为在list的基础上创建一个新的数组,不会改变原数组   //这里的name是上方数组中的name
         return this.list.filter(value=>value.name.indexOf(this.searchId)!==-1)  
         }
    }
 }
 </script>