使用vue的computed 计算属性，filter 做筛选

最新推荐文章于 2025-07-06 22:47:46 发布

原创最新推荐文章于 2025-07-06 22:47:46 发布 · 5.4k 阅读

7 ·

CC 4.0 BY-SA版权

总结不易，转载请说明出处哦!

文章标签：

#vue筛选

vue2.0.js 专栏收录该内容

29 篇文章

订阅专栏

本文介绍了一个使用Vue.js实现的实时搜索功能，当用户在输入框中输入内容时，页面会立即筛选出符合搜索条件的数据项并显示。示例代码展示了如何通过Vue的计算属性和v-model实现数据绑定和动态更新。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在这里插入图片描述
输入框输入值之后，立马筛选下边符合条件的数据
html

  <div id="app">
    <input type="text" v-model="val">
    <ul>
      <li v-for="(item,index) in dataSource">
        {{item.name}}
      </li>
    </ul>
  </div>

new Vue({
  el:'#app',
  data:{
    list:[
      {
        name:'a12313123',
      },
      {
        name:'d123245',
      },
      {
        name:'c1245s',
      },
      {
        name:'b521254',
      },
    ],
    val:''
  },
  computed:{
    dataSource(){
      return this.list.filter(k=>{
        return k.name.match(this.val)
      })
    }
  }
})