您现在的位置是：网站首页> 编程资料编程资料

vue实现input输入模糊查询的三种方式_vue.js_

2023-05-24 321人已围观

简介 vue实现input输入模糊查询的三种方式_vue.js_

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

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

演示：

打开默认显示全部

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

完整代码如下：

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

名字	年龄
{{ item.name }}	{{ item.age }}

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

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

完整代码如下：

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

名字	年龄
{{ item.name }}	{{ item.age }}

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

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

vue.app 代码：

姓名	年龄
{{ item.name }}	{{ item.age }}

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输入模糊查询内容请搜索以前的文章或继续浏览下面的相关文章希望大家以后多多支持！

您可能感兴趣的文章:

上一篇：Vue实现前后端完全分离的项目实战_vue.js_