根据给定的文件内容,可以总结出以下关于Vue搜索和Vue模糊搜索的知识点: ### Vue搜索基础 Vue搜索是指在Vue.js框架中实现搜索功能的技术,通过双向数据绑定将用户输入与数据源相匹配来过滤显示的数据。在给定的文件中,使用了Element UI组件库的`<el-input>`作为搜索输入框,并通过`v-model`指令与组件的数据属性绑定,实现数据的双向绑定。 ```html <el-input v-model="input" placeholder="请输入内容" ref="search" style="width:300px;"></el-input> ``` 在上述代码中,`v-model`绑定了`input`数据属性,用户输入的任何内容都会即时更新到`input`中。当用户提交表单时,触发`submitQuery`方法,获取当前输入框的值,并可以对其进行进一步处理,例如发送到服务器或在本地进行数据过滤。 ### Vue模糊搜索 Vue模糊搜索是基于Vue搜索的一种特殊情况,即不完全匹配搜索项,而是根据部分匹配来显示数据。在文件内容中,模糊搜索是通过检查输入值是否在数据项的属性中出现来实现的。 ```javascript queryDate: function(list) { if (this.query === '') { return list; } return list.filter((item) => { if (item.name.indexOf(this.query) != -1) { return item; } }); } ``` 上述方法`queryDate`接收一个列表`list`,并根据`this.query`中的值进行过滤。如果`this.query`是空字符串,则返回原始列表。如果`this.query`有值,那么过滤条件是:`item.name`属性中包含`this.query`的值。使用JavaScript的`indexOf()`方法来进行字符串的包含检查。 ### Element UI表单使用 在文件内容中,还介绍了如何在Vue项目中使用Element UI组件库来构建表单界面。Element UI是基于Vue 2.0的一套组件库,它提供了丰富的组件用于快速构建Web界面。 ```html <el-form inline model="formInline" class="demo-form-inline mt15"> ``` 使用`<el-form>`组件创建表单,并通过`model`属性绑定数据对象。`inline`属性使表单以行内元素形式展示,提高界面友好性。 ### 多字段模糊搜索 在文件内容的第二部分,介绍了如何实现基于多个字段的模糊搜索。这种方法在很多情况下非常有用,例如在用户填写姓名和手机号的情况下进行搜索。 ```javascript onSubmit() { this.query = this.$refs.search.value.trim(); this.query1 = this.$refs.search1.value.trim(); }, ``` 在`onSubmit`方法中,通过`this.$refs`获取两个不同输入框的值。之后可以根据这两个值进行组合搜索,通过逻辑判断组合不同的搜索条件。 ### 数据源的确定性 在文件内容中,提到了使用`this.$store.state.chufang.alldata`作为数据源。这表明使用了Vue的状态管理库Vuex来管理全局状态。`$store`是Vuex提供的全局状态对象,通过它可以访问到应用中的state,getters,mutations,actions等。 ### 总结 通过分析文件内容,我们可以学习到如何在Vue.js项目中使用Element UI快速构建搜索表单,并通过`v-model`实现数据的双向绑定,以及如何实现基于多个字段的模糊搜索。同时,我们还看到了Vuex在管理状态时的应用,这对于大型的Vue应用程序来说是一个非常重要的概念。文件中提供的代码示例非常实用,对于初学者和有一定经验的开发者都具有很好的参考价值。
- 粉丝: 4
- 资源: 979
- 我的内容管理 展开
- 我的资源 快来上传第一个资源
- 我的收益 登录查看自己的收益
- 我的积分 登录查看自己的积分
- 我的C币 登录后查看C币余额
- 我的收藏
- 我的下载
- 下载帮助
最新资源
- 【java毕业设计】客户关系管理系统源码(ssm+mysql+说明文档).zip
- 【java毕业设计】酒店客房预定管理系统源码(ssm+mysql+说明文档+LW).zip
- 【java毕业设计】教师业务数据统计与分析系统源码(ssm+mysql+说明文档).zip
- cp105b,cp205,cp205w,cp215,cp215w寿命重置工具,解决091-402
- 【java毕业设计】健身房管理系统源码(ssm+mysql+说明文档).zip
- py test for self
- ui-auto test for self
- 【java毕业设计】基于推荐算法的图书购物网站源码(ssm+mysql+说明文档+LW).zip
- appium test for self
- 【java毕业设计】基于数据元标准的教材征订管理系统源码(ssm+mysql+说明文档).zip