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')

整体结构：

演示：

输入关键字，点击查询：

大小写模糊查询：

到此这篇关于vue实现input输入模糊查询的三种方式的文章就介绍到这了,更多相关vue input输入模糊查询内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！