vue.js中过滤器的使用教程

2024-10-17 21:54:19

前言

大家再使用vue做项目时，查询功能当然必不可少，这就得使用vue强大的filter啦。其实vue内置的两个属性filterBy和orderBy已经能满足部分需求了，但是她更大的的魅力在于自定义filter（之后的文章中会分享），正好我最近做的项目中用到了这个。先给大家看下需求吧。如下图，这是一个通讯录页面，当我们在搜索栏中输入关键字时需要展示相应的员工，同时还得去掉A、B这样的字母索引，并且输入的关键字可以是中文也可以是拼音。

该页面引入搜索栏组件search-bar以及联系人组件user-list,这个搜索栏组件要做的事很简单，因为我们查询的这个参数是动态的，所以只需要在vue上挂载一个v-model即可，然后它相对于这个页面来说是子组件，父子传值就得用props，所以还要用props接收一下，简单写下该组件大家看明白意思即可。

// 组件search-bar
<input type="search" v-model="okr_owner"/>

props: {
 okr_owner: {
  type: String
 }
}

// 通讯录页面
<template>
 <search-bar :okr_owner.sync="key_word"></search-bar>
 <user-list :filter_key="key_word"></user-list>
</template>

// 组件 user-list
<li v-for="single_user in user_list.members | filterBy filter_key in 'user.u_name' 'okr_owner' | orderBy 'okr_owner'">
 props: {
 filter_flag: {
  type: Boolean
 },
 filter_key:{
  type: String
 }
}

然后我们需要在该页面引入这个搜索栏子组件,这里我用到了sync，因为props只能父传子，不能子传父，但是我们这上面引用了两个组件，就是说搜索栏组件中的data要拿到联系人组件中来用，所以需要一个字段(key_word)将两者沟通起来，当我们不写sync时大家可以看到，父的确传值给子组件了，但是子组件中的okr_owner变化之后并没有传给父组件中的key_word，这样联系人组件就接受不到数据源，所以我们需要给他加上sync（双向绑定，父传子和子传父），联系人组件中的filter才可以生效。

在user-list组件中我们需要遍历联系人列表，filter_key用来传给该组件，和搜索栏组件一样，也用props接收一下，并且在里面插入要过滤的内容，

filterBy是返回过滤后的数组，orderBy是排序，前者的使用方法是filterBy 一个key(字段)，in xxx 就是指搜索字段，这里需要注意的是in后面跟的必须是obj里面的key，因为我们的需求是同时保证输入汉字或者拼音都能查询，所以in后面跟的是okr_owner和user.u_name(这是vue渲染的数据，我们展示该联系人用的是里面的u_name，okr_owner则为拼音)，下面附上数据结构。对于在搜索时如何去掉这些字母索引，我们只需要在通讯录页面中的<user-list>加入一个字段，然后使用watch来监听一下key_word即可。

总结

以上就是这篇文章的全部内容了，希望本文的内容对大家的学习或者工作能带来一定的帮助，如果有疑问大家可以留言交流，谢谢大家对我们的支持。

Vue.js -- 过滤器使用总结

过滤器是一个通过输入数据,能够及时对数据进行处理并返回一个数据结果的简单函数.Vue有很多很便利的过滤器,过滤器通常会使用管道标志 " | ", 比如: {{ msg | capitalize }} // 'abc' => 'ABC' uppercase过滤器 : 将输入的字符串转换成大写字母的过滤器. VueJs允许你链式调用过滤器,简单的来说,就是一个过滤器的输出成为下一个过滤器的输入,然后再次过滤.接下来,我们可以想象一个比较简单的例子,使用了Vue的 filterBy +
详解Vue自定义过滤器的实现

一自定义过滤器(注册在Vue全局) 注意事项: (1)全局方法 Vue.filter() 注册一个自定义过滤器,必须放在Vue实例化前面 (2) 过滤器函数始终以表达式的值作为第一个参数.带引号的参数视为字符串,而不带引号的参数按表达式计算 (3)可以设置两个过滤器参数,前提是这两个过滤器处理的不冲突 (4)用户从input输入的数据在回传到model之前也可以先处理 <!DOCTYPE html> <html> <head> <meta charset=&qu
vue货币过滤器的实现方法

自定义事件也可以用来创建自定义的表单输入组件,使用 v-model 来进行数据双向绑定. 所以要让组件的 v-model 生效,它必须: 接受一个 value 属性在有新的 value 时触发 input 事件代码如下: HTML: <div id="app"> <p>{{ message }}</p> <currency-input label="Price" v-model="price">
Vue.js每天必学之过滤器与自定义过滤器

基础类似于自定义指令,可以用全局方法 Vue.filter() 注册一个自定义过滤器,它接收两个参数:过滤器 ID 和过滤器函数.过滤器函数以值为参数,返回转换后的值: Vue.filter('reverse', function (value) { return value.split('').reverse().join('') })  <span v-text="message | reverse">&
详解Vue2.0里过滤器容易踩到的坑

vue2.0里,不再有自带的过滤器,需要自己定义过滤器.定义的方法如下: 注册一个自定义过滤器,它接收两个参数:过滤器 ID 和过滤器函数. Vue.filter('filtername',function(value,参数){ return 参数+value.split('').reverse().join(''); }); function里第一个参数value默认为使用这个过滤器的data对象内的值,在本例中是msg的值'you are mine'. 坑1:第一个参数必须为自身的值,后面可
Vuejs入门教程之Vue生命周期，数据，手动挂载，指令，过滤器

原教程: http://cn.vuejs.org/guide/instance.html http://cn.vuejs.org/guide/syntax.html 本博文是在原教程的基础上加上实例,并尝试说明的更详细. (十)Vue实例的生命周期如图:(我自己翻译的中文版,英文版请查看本博文顶部的,第一个链接) (八)传入的数据绑定先创建一个对象(假如是obj),然后将他传入Vue实例中,作为data属性的值,那么 ①obj的值的变化,将影响Vue实例中的值的变化: ②相反一样: ③可以在
Vue实现自带的过滤器实例

一过滤器写法 {{ message | Filter}} 二 Vue自带的过滤器:capitalize 功能:首字母大写 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Vue自带的过滤器</title> <meta name="viewport" content="width=device-width,i
Vue.js学习之过滤器详解

前言在这个教程中,我们将会通过几个例子,了解和学习VueJs的过滤器.阅读这这篇文中的前提是你对Vue已经有了基本的语法基础. Vue.Js中的过滤器基础过滤器是一个通过输入数据,能够及时对数据进行处理并返回一个数据结果的简单函数.Vue有很多很便利的过滤器,可以参考官方文档, http://cn.vuejs.org/api/#过滤器 ,过滤器通常会使用管道标志 " | ", 比如: {{ msg | capitalize }} // 'abc' => 'ABC' upper
Vue过滤器的用法和自定义过滤器使用

1.过滤器的用法,用 '|' 分割表达式和过滤器. 例如:{{ msg | filter}} {{msg | filter(a)}} a就标识filter的一个参数. 用两个过滤器:{{msg | myfilter | myfilternumber }} 2.自定义的过滤器过滤器的结构为:Vue.filter("id",function(value,a){}); value是过滤器的一个参数,也是默认的原始值.a是自定义的一个参数. 自定义过滤器的例子: <!DO
Vue2.0实现1.0的搜索过滤器功能实例代码

Vue2.0删除了很多1.0的比较实用的过滤器,如filterBy,orderBy.官方文档给了通过计算属性实现1.0搜索过滤器功能,自己又加入了大小写通用检索功能,比较简单,学一下. <body> <div class="app"> <input type="text" v-model="name"> <ul> <li v-for="user in newUsers" &

vue.js中过滤器的使用教程

相关推荐

随机推荐