Vue 过滤器filters
1、什么是过滤器?
说到过滤,我们生活中也经常有过滤的操作,洗菜用筛子过滤掉水,实验室做化学实验过滤掉杂质。
而开发中的过滤器是对即将显示的数据做进一步的筛选处理,然后进行显示,值得注意的是过滤器并没有改变原来的数据,只是在原数据的基础上产生新的数据。
2.过滤器的定义和举例
过滤器分为局部和全局过滤器
- 局部过滤器
new Vue({ filters: { '过滤器名称': function (value1[,value2,...] ) { // 逻辑代码 } } })
举例
一般银行账户的金额,都需要一定的格式化,保留2位小数
<!-- 在双花括号中 --> <div>{{数据属性名称 | 过滤器名称}}</div> <div>{{数据属性名称 | 过滤器名称(参数值)}}</div>
template><div><h3>过滤器</h3><h4>格式化工资</h4><p>{{money|moneyFormat}}</p></div>
</template><script>
export default {data() {return {money:3333}},filters: {moneyFormat(value) {return '¥' + Number(value).toFixed(2)}}
}
</script>
- 全局过滤器
Vue.filter('过滤器名称', function (value1[,value2,...] ) { //逻辑代码})
在main.js中写全局过滤器
Vue.filter('globalMoneyFormat', function(value) {return '¥' + Number(value).toFixed(2)
});
组件中代码
<template><div><h3>过滤器</h3><h4>格式化工资</h4><p>{{money|globalMoneyFormat}}</p></div>
</template><script>
export default {data() {return {money:13333}}
}
</script>
Vue 过滤器filters相关推荐
- 带你掌握Vue过滤器filters及时间戳转换
摘要:Vue的filters过滤器是比较常见的一个知识点,下面我将结合时间戳转换的例子带你快速了解filters的用法. 本文分享自华为云社区<三分钟掌握Vue过滤器filters及时间戳转换& ...
- vue如何过滤html标签,Vue过滤器filters使用详解
这次给大家带来Vue过滤器filters使用详解,Vue过滤器filters使用的注意事项有哪些,下面就是实战案例,一起来看一下. 示例代码 采用vue单文件组件,使用moment插件格式化日期 {{ ...
- vue 过滤器 filters
<!-- 过滤器: 定义:对要显示的数据进行特定格式化之后再显示(使用与一些简单的逻辑)语法:1. 注册过滤器:Vue.filter.(name, callback) 或 new Vue{fil ...
- Vue过滤器filters
使用场景 用于一些常见的文本格式化.也许后端返回的数据格式并不是最终想要展示出来的,通过过滤器可以进行处理成自己想要展示出来的格式.由"管道"符号指示. 使用方式 1.双花括号插值 ...
- 三分钟掌握Vue过滤器filters及时间戳转换
一.速识概念: 大家好呀,
- vue中过滤器filters的this指向问题。
今天在完成一个时间戳转化时想试试vue的过滤器filters,代码如下: execute_time(time) {if (time === 0) return '/'else return this. ...
- Vue过滤器(filters)的简单使用
1.Vue过滤器的简单介绍 Vue.js 允许你自定义过滤器,可被用于一些常见的文本格式化.过滤器可以用在两个地方:双花括号插值和 v-bind 表达式.过滤器应该被添加在 JavaScript 表达 ...
- Vue中filters过滤器无效的原因
Vue中filters过滤器无效的原因 如果你的过滤器内部需要用到循环 请不要使用map函数代替for循环或者是foreach循环 如图: 因为过滤器本身需要一个return 把结果返回出去 然而ma ...
- Vue过滤器的简单使用--实时显示格式化的时间
Vue的过滤器的使用是在{{}}插值的尾部添加一个管道符 | 过滤的规则是自己定义的,通过给Vue实例添加选项filters来设置 通过过滤器对时间进行格式化从而实时显示时间 <!doctyp ...
- web前端技巧分享:vue过滤器的那点事!
关于vue的过滤器,其实在vue1.0的时候是内置了过滤器的,但是自从到了2.0之后就被去掉了,但是我们可能还会使用到,所以就需要自己定义过滤器了,下面小千就带你了解一下如何定义过滤器和过滤器都有哪些 ...
最新文章
- 2022-2028年中国文化旅游业投资分析及前景预测报告(上中下卷)
- vue下轻松解决模拟微信视频缩略图拖拽→吸附窗口边界的功能
- 图像拼接 python c++
- NYOJ 467 中缀式变后缀式
- iPhone比小米贵3000,贵在哪里?
- android蓝牙设计与实现,一个Android客户端的蓝牙支付系统设计与实现
- 记录一次spark连接mysql遇到的问题
- mysql查询语句块_mysql查询语句
- 上传相关js和jquery对象
- dpkg和apt-get命令的用法
- 牛客网项目——项目开发(十):热帖排行,生成长图,上传云服务器,性能优化
- 16S 扩增子分析工具:Swarm 聚类OTU流程介绍
- IMF最新报告:E-money上位,合成版「央行数字货币」迎来曙光
- 后端开发java与php,【后端开发】java与php的区别是什么
- 升级到JUnit5的7个理由
- 长篇故事| 世上的感情真的需要门当户对吗?
- java银行账户类_用java编写银行账户的存款方法
- Python编曲实践(一):通过Mido和PyGame来编写和播放单轨MIDI文件
- 什么是过孔式导电滑环?
- Android 接口回调实例