vue实现input输入模糊查询(三种方式)

vue实现input输入模糊查询(三种方式)

目录

vue实现input输入模糊查询(三种方式)

1 计算属性实现模糊查询

演示：

2 watch 监听实现模糊查询

3 通过按钮点击实现模糊查询

演示：

1 计算属性实现模糊查询

vue 中通过计算属性实现模糊查询,创建 html 文件，代码直接放入即可。

这里自己导入 vue，我是导入本地已经下载好的。

演示：

打开默认显示全部

输入关键字模糊查询，名字和年龄都可以

完整代码如下：

  
    
    
    
  
  
    

      
人员列表
      
      
        
          
            
            
          
        
        
          
            
            
          
        
      
名字
年龄
{{ item.name }}
{{ item.age }}
    
​
    
​
    
  

2 watch 监听实现模糊查询

vue 中通过watch 监听实现模糊查询

vue 中通过计算属性实现模糊查询,创建 html 文件，代码直接放入即可。

完整代码如下：

  
    
    
    
  
  
    

      
人员列表
      
      
        
          
            
            
          
        
        
          
            
            
          
        
      
名字
年龄
{{ item.name }}
{{ item.age }}
    
​
    
​
    
  

演示和计算属性的一样。。

3 通过按钮点击实现模糊查询

这里我是在 vue-cli 中完成的，完整代码如下。

vue.app 代码：

​

​

main.js 代码如下：

import Vue from 'vue'
import App from './App.vue'
​
Vue.config.productionTip = false
​
new Vue({
  render: h => h(App),
}).$mount('#app')

​

整体结构：

演示：

输入关键字，点击查询：

大小写模糊查询：

星月前端博客https://xingyue.vercel.app/

个人博客，记录前端学习笔记，欢迎收藏或者提意见。