vue过滤器filters怎么用(如何使用vue过滤器filter)
vue过滤器filters怎么用
如何使用vue过滤器filter目录
- 概述
- 定义过滤器
- 过滤器的使用
- 自定义全局过滤器
- 局部过滤器
- 注意事项
- 示例一(局部过滤器)
- 示例二(全局过滤器)
在 vue2.0 之前,是有内置过滤器的,在2.0中已经没有内置的过滤器了,但我们可以自定义过滤器。
关于 vue 过滤器,在官方文档中是这样说明的:
Vue.js 允许你自定义过滤器,可被用于一些常见的文本格式化。过滤器可以用在两个地方:双花括号插值和 v-bind 表达式 (后者从 2.1.0+ 开始支持)。过滤器应该被添加在 JavaScript 表达式的尾部,由“管道”符号指示。
即过滤器是用来格式化数据的一个函数。过滤器不会修改原始数据,它的作用是过滤数据,就是对数据进行加工处理并返回处理后的数据,比如做一些数据格式上的修改,状态转换等。
过滤器分为两种
- 组件内的过滤器(组件内有效)
- 全局过滤器(所有组件共享)
第一个参数是过滤器的名字
第二个参数是过滤器的功能函数 (若不定义vue就不知道这个字符串是什么,有什么作用)。
过滤器的功能函数
- 声明 function(data,argv1,argv2...){}
- 第一个参数是传入的要过滤的数据,即调用时管道符左边的内容。
- 第二个参数开始往后就是调用过滤器的时候传入的参数。
先注册,后使用
组件内 filters:{ 过滤器名: fn } fn 内通过 return 返回最终的数据
全局 Vue.filter('过滤器名',fn) fn 内通过 return 返回最终的数据
使用 {{ 数据 | 过滤器名 }}
// 使用过滤器时需要添加管道符号( | )作为分隔,管道符 | 右边是过滤器名称,即文本的功能函数 <!-- 在双花括号中 --> {{ message | 过滤器名称 }} <!-- 在 `v-bind` 中 --> <li v-bind:id="id | 过滤器名称"></li>
Vue.filter('过滤器名称', function(val) { // val表示要被处理的数据 // 过滤器业务逻辑,要有返回值 }) <li>{{ msg | 过滤器名称 }}</li> <li v-bind="msg | 过滤器名称"></li>
data () { return { msg: 'hello world' } }, //定义私用局部过滤器。只能在当前 vue 对象中使用 filters: { dataFormat: (msg, a) => { // msg表示要过滤的数据,a表示传入的参数 return msg + a; } } <p>{{ msg | dataFormat('!')}}</p> // 结果: hello world!
1.全局注册时是 filter 没有 s , 而组件过滤器是 filters,是有 s 的,虽然写的时候没有 s 也不报错,但是过滤器是没有效果的。
2.当全局过滤器和局部过滤器名字重复的时候,会以就近原则进行调用,即:局部过滤器优先于全局过滤器被调用
3.一个表达式可以使用多个过滤器,其执行顺序从左往右,前一个过滤器的结果作为后一个过滤器的被处理数据,所以要注意使用顺序
熟悉 vue 的童鞋会知道,过滤器有时同methods、computed、watch一样可以达到处理数据的目的,但又不能替代它们,因为它不能改变原始值。如果一个过滤器的内部特别复杂,可以考虑把它写成一个计算属性,因为计算属性本身带有缓存,可复用性强,而过滤器一般用来做一些简单的操作。
在实际开发中,全局的过滤器要比局部过滤器使用的更广泛一些,说白了我们为什么要使用过滤器,其实就跟使用函数是一样,把一些方法封装,供其它组件使用,这样调用起来更方便也更快捷。
大家知道全局过滤器是在 main.js 中定义的,但万一项目过大,有多个过滤器,那 main.js 就一堆代码,为了项目模块化,最好是有专门的目录来统一存放这些过滤器,然后把处理函数给抽离出去,放在一个.js文件中,下边通过示例代码展示。
示例一(局部过滤器)格式化时间或日期,补全指定位数,不足个位数补0
// filter/index.js文件 export default { dateFormat: value => { const dt = new Date(value * 1000) const y = dt.getFullYear() const m = (dt.getMonth() + 1 + '').padStart(2, '0') // .padStart(指定位数,"要补全的符号或值") const d = (dt.getDay() + '').padStart(2, '0') const hh = (dt.getHours() + '').padStart(2, '0') const mm = (dt.getMinutes() + '').padStart(2, '0') const ss = (dt.getSeconds() + '').padStart(2, '0') return `${y}-${m}-${d} ${hh}:${mm}:${ss}` } } // 在 .vue 文件中使用局部过滤器 <script> import filters from '../filter' export default { ... ... filters: { ...filters }, data() { return {} } } </script> <li> 日期:{{ date | dateFormat }} </li>
通用字典项的回显:比如性别男女或通用选择是否,后端传给我们的数据是0、1,我们需要在页面上显示男女或是否
// constants/dictionary.js 文件 export const GENDER_MENU = [ { code: 0, label: '男'}, { code: 1, label: '女'} ]; export const COMMON_MENU = [ { code: 0, label: '否'}, { code: 1, label: '是'} ]; export default { GENDER_MENU, COMMON_MENU }
filter / dict.js 文件
// filter/dict.js 文件 import Dict from '../constants/dictionary' export const genderMenu = { func: value => { const target = Dict.GENDER_MENU.filter(item => { return item.code = value; }) return target.length ? target[0].label : value; } } export const commonMenu = { func: value => { const target = Dict.COMMON_MENU.filter(item => { return item.code = value; }) return target.length ? target[0].label : value; } }
filter / index.js 文件
// filter/index.js 文件 import * as filters from './dict' // 导入过滤函数 const Install = Vue => { // 导入的 filters 是一个对象,使用Object.keys()方法,得到一个由key组成的数组,遍历数据,让key作为全局过滤器的名字,后边的是key对应的处理函数,这样在任何一个组件中都可以使用全局过滤器了 Object.keys(filters).forEach(key => { Vue.filter(key, filters[key].func) }) /* for(const _filter in filters) { Vue.filter(`${_filter}`, filters[_filter].func) } */ } export default Install
main.js 文件
// main.js 文件 ... ... import filters from './../filter/index' Vue.use(filters) ... ...
在.vue 文件中使用全局过滤器
// .vue 文件中使用全局过滤器 <p>性别:{{ gender | genderMenu }}</p>
以上就是如何使用vue过滤器filter的详细内容,更多关于vue过滤器filter的资料请关注开心学习网其它相关文章!
- vueelementui动态表格(Vue Element前端应用开发之常规的JS处理函数)
- vue 父组件传值(Vue两个同级组件传值实现)
- 使用vue组件开发项目(Vue记事本实例详解)
- vue如何excel表格上传功能(Vue + iView实现Excel上传功能的完整代码)
- vue常用的指令和修饰符(Vue中 Vue.prototype使用详解)
- vue和springboot实战项目(vue+spring boot实现校验码功能)
- vue 修改后刷新(Vue使用三种方法刷新页面)
- vue3 动态生成组件(如何在vue3.0+中使用tinymce及实现多图上传文件上传公式编辑功能)
- vuejs filter过滤器的使用(Vue过滤器filter实现及应用场景详解)
- vue轮播图代码(vue实现无缝轮播效果跑马灯)
- elementuivue使用技巧(Vue Element前端应用开发之常规Element界面组件)
- vue移动端返回在指定位置(vue移动端判断手指在屏幕滑动方向)
- vue左右滑动切换(vue实现界面滑动效果)
- vue怎么使用element(Vue Element前端应用开发之图标的维护和使用)
- vue弹窗模板(Vue登录页面的动态粒子背景插件实现)
- vue组件详解(Vue的方法和属性案例详解)
- 人从众 火炎焱 全椒再现 正月十六走太平 的魅力(人从众火炎焱全椒再现)
- 官宣 全椒籍明星许海峰 奚秀兰 方芳 王璐瑶携手回家 走太平(全椒籍明星许海峰)
- 以前全椒人是怎么过冬的 满满都是回忆(以前全椒人是怎么过冬的)
- NVIDIA显卡份额冲上88 A饭发愁 游戏优化恐没A卡份了(NVIDIA显卡份额冲上88A饭发愁)
- AMD YES A卡还是N卡 A卡和N卡的区别(AMDYESA卡还是N卡)
- 以后显卡多了一个新选择,N卡和A卡外又多了个I卡(以后显卡多了一个新选择)
热门推荐
- python对列表排序(Python实现对特定列表进行从小到大排序操作示例)
- mysql 建表命令注释(mysql alter table命令修改表结构实例详解)
- springcloud部署docker(Spring Cloud中使用jib进行docker部署的步骤详解)
- SQL语句查询SQL SERVER作业的调度信息
- apache访问提示404(Apache跨域资源访问报错问题解决方案)
- SQL中patindex的用法
- with(nolock)的用法
- 云主机的优势是什么(云主机有哪些用途和优势)
- css样式基础知识(CSS深入教程之文字修饰的那点事)
- dedecms栏目怎么调用友情链(DedeCms用SQL语句调用数据库任意内容方法)