Vue过滤器-filter
Vue中的过滤器不能替代Vue中的methods、computed或者watch,因为过滤器不改变真正的data,而只是改变渲染的结果,并返回过滤后的版本。在很多不同的情况下,过滤器都是有用的,比如尽可能保持API响应的干净,并在前端处理数据的格式。在你希望避免重复和连接的情况下,它们也可以有效地封装成可重用代码块背后的所有逻辑。
过滤器作用:让要显示在页面上的内容进行重新筛选
Vue过滤器分全局过滤器和组件过滤器
全局过滤器
定义
// 第一个参数是需要过滤的数据.
// 第二个参数是给过滤器传递的值.Vue.filter('global-filter',(val,...args)=>{console.log(`需要过滤的数据是:${val}`)return val + ' 过滤器追加的数据'})var app = new Vue({el: '#app',data: {price:null,oldValue: '原始数据'})
<div id='app'><p>{{oldValue | global-filter}}</p></div>
注意,过滤器在插值表达式里使用 lunix 命令行的管道语法.
{{ oldValue | global-filter }}
把 oldValue 的值原封不动的传递给 global-filter.
在 global-filter 方法定义里,第一个参数 val 就是 oldValue。
当然,过滤器本来就是一个方法,方法肯定是可以传参数的.
Vue.filter('global-filter',(val,...args)=>{[图片上传中...(15445114994941.jpg-9fecae-1544511784154-0)]args.forEach(item=>{val += ` ${item} - `})return val + ' 过滤器追加的数据'})
<div id='app'><p>{{oldValue | global-filter(1,2,3,4,5)}}</p></div>
组件过滤器
全局过滤器通过 Vue.filter(‘filtername’,fliterFn) 来定义,它定义好了之后,在所有的组件内都可以使用.
局部过滤器,定义在组件内部 filters 属性上.它只能在此组件内部使用.
具体语法:
var app = new Vue({el: '#app',data: {price:null,oldValue: '原始数据'},methods: {},// 定义组件过滤器filters: {priceFmt(val,location) {switch(location) {case 'usa':return '$' + valbreakdefault:return val}}})
除了使用范围不同,全局过滤器和组件过滤器没有任何其他的区别.
Vue过滤器-filter相关推荐
- Vue过滤器filter
1.是vue为开发者提供的功能,常用于文本的格式化 2,要用于文本的格式化,或者数组数据的过滤与排序等. 3,使用过滤器:{{ xxx | 过滤器名}} 或 v-bind:属性 = "xxx ...
- Vue过滤器(filter)
过滤器函数,必须被定义到 filter 节点之下 过滤器本质上是函数 语法: <div id="app"> <p>{{message | capi}} ...
- vue 过滤器filter(全面)
在官方文档中,是这样说明的:可被用于一些常见的文本格式化,vue中过滤器的作用可被用于一些常见的文本格式化.(也就是修饰文本,但是文本内容不会改变) 补充: 过滤器分全局过滤器和局部过滤器,下边我着重 ...
- vue 过滤器 filter
<body><div id="app"><input type="text" v-model='msg'><div&g ...
- vue过滤器filter中this指向问题
本人在项目中遇到一个情况,在对数据进行格式化时,定义了一个局部过滤器,但是在过滤器中使用this调用methods的方法时,报方法为undefined的错误,打印this,输出结果为undefined ...
- momentjs转换格式_Moment.js+Vue过滤器的使用,各种时间格式转换为YYYY-MM-DD HH:mm:ss格式...
前言 这篇文章将Moment.js与vue过滤器连用.如果不会过滤器的朋友,可以先看这篇文章vue过滤器 一.Moment.js是什么? Moment.js是JavaScript 日期处理类库.使用场 ...
- Vue过滤器属性filter
vue属性过滤器filter 一. 过滤器filter作用 作用是转换格式, 把变量或者表达式转换出来 Vue中的过滤器场景 全局定义字母都大写的过滤器 字母转大写, 输入"hello&qu ...
- vue+filter+html标签,vue过滤器用法实例分析
本文实例讲述了vue过滤器用法.分享给大家供大家参考,具体如下: 过滤器: vue提供过滤器: capitalize uppercase currency.... {{msg|currency ¥}} ...
- 如何在vue上全局使用过滤器filter
如何在vue上全局使用过滤器filter 在src下新建文件夹utils,创建filter.js文件 import Vue from 'vue'Vue.filter("publishdate ...
最新文章
- 为提高访问速度建立本地文件服务器,html5 Application Cache——加快简历二次访问速度...
- Redis根据是否存在设置值
- JavaScript之apply()和call()的区别
- 虚拟ip weblogic服务器,虚拟IP是什么
- SET CONSTRAINTS DEFERRED | IMMEDIATE
- Android底层到上层的开发流程
- python在电力系统中的应用_PyPSA在电力系统潮流计算中的应用
- 初次汇编程序 masm5
- 谷歌发布研究人口流动性的新方法【智能快讯】
- 4年产品点滴心路——谈谈形而上的3个产品素质
- 面试问题总结——关于YOLO系列(三)
- 惟伊·京汉方邀约全国贵宾黄龙溪一日游
- 小森生活服务器维护还要多久,小森生活暮夕深林材料刷新时间是多久_暮夕深林材料刷新时间位置汇总_3DM手游...
- android刷新时的圆形动画_Android 实现倒计时动画效果
- drawio界面自定义配置
- 关于STM32空闲中断
- 计算长方形的面积 周长 C语言,c语言计算长方形的面积和周长
- 【Hardware】【磁保持继电器基础知识】
- JS配置KaTeX渲染LaTeX公式
- ZYNQ-使用SD卡读写文本数据
热门文章
- View onMeasure 方法
- csdn月入过万的作者是如何练成的?
- 【大学物理·光学】薄膜干涉
- zzulioj1094c语言版答案,ZZULIOJ 1094: 统计元音(函数专题)
- 铁道部新规:列车空闲卧铺票可打折至50%
- 三天搞定射频识别技术(一)1.2
- 单片机IC卡读取开题报告_基于单片机的ic卡读写系统的实现.doc
- 没信号是不是就无服务器,不要没网就说wifi断流,你知道什么是断流吗?
- Bluetooth DUN 蓝牙拨号网络 (http://blog.sina.com.cn/s/blog_59b22a2e0100ildk.html)
- 指令集CEO潘爱民受聘为之江实验室智能计算数字反应堆首席架构师