Vue.js 过滤器
过滤器
Vue.js 允许你自定义过滤器,可被用于一些常见的文本格式化。过滤器可以用在两个地方:双花括号插值和 v-bind
表达式 (后者从 2.1.0+ 开始支持)。过滤器应该被添加在 JavaScript 表达式的尾部,由“管道”符号指示:
<!-- 在双花括号中 --> {{ message | capitalize }}<!-- 在 `v-bind` 中 --> <div v-bind:id="rawId | formatId"></div> |
你可以在一个组件的选项中定义本地的过滤器:
filters: {capitalize: function (value) {if (!value) return ''value = value.toString()return value.charAt(0).toUpperCase() + value.slice(1)} } |
或者在创建 Vue 实例之前全局定义过滤器:
Vue.filter('capitalize', function (value) {if (!value) return ''value = value.toString()return value.charAt(0).toUpperCase() + value.slice(1) })new Vue({// ... }) |
下面这个例子用到了 capitalize
过滤器:
John
过滤器函数总接收表达式的值 (之前的操作链的结果) 作为第一个参数。在上述例子中,capitalize
过滤器函数将会收到 message
的值作为第一个参数。
过滤器可以串联:
{{ message | filterA | filterB }} |
在这个例子中,filterA
被定义为接收单个参数的过滤器函数,表达式 message
的值将作为参数传入到函数中。然后继续调用同样被定义为接收单个参数的过滤器函数 filterB
,将 filterA
的结果传递到 filterB
中。
过滤器是 JavaScript 函数,因此可以接收参数:
{{ message | filterA('arg1', arg2) }} |
这里,filterA
被定义为接收三个参数的过滤器函数。其中 message
的值作为第一个参数,普通字符串 'arg1'
作为第二个参数,表达式 arg2
的值作为第三个参数。
from: https://cn.vuejs.org/v2/guide/filters.html
Vue.js 过滤器相关推荐
- Vue.js过滤器概述
过滤器 一个 Vue.js 的过滤器本质上是一个函数,这个函数会接收一个值,将其处理并返回.过滤器在指令中由一个管道符 (|) 标记,并可以跟随一个或多个参数: <element directi ...
- html过滤器作用,vue.js过滤器有什么用?
一.过滤器 1.1 概述 (1)过滤器(Filters)提供了一种 执行文本转换的方法,比如说都转换成大写字母或者几乎做任何我们想做的事情. (2)过滤器既可以在 双花括号插值 中使用,也可以在 v- ...
- 小陈学vue.js 过滤器
过滤器可以用在两个地方:双花括号插值和 v-bind 表达式 (后者从 2.1.0+ 开始支持).过滤器应该被添加在 JavaScript 表达式的尾部,由"管道"符号指示: &l ...
- methods vue 使用过滤器_Vue.js中过滤器(filter)的使用
Vue.js 过滤器的基本使用(filter) vue中的过滤器分为两种:局部过滤器和全局过滤器 1.定义无参全局过滤器 Vue.filter('msgFormat', function(msg) { ...
- Vue.js中过滤器(filter)的使用
Vue.js 过滤器的基本使用(filter) vue中的过滤器分为两种:局部过滤器和全局过滤器.全局过滤器定义在vue类中,句柄过滤器定义在vue实例中. 1.定义无参全局过滤器 Vue.filte ...
- 第5章-Vue.js交互及生命周期练习
一.学习目标 使用网络请求进行前后端交互 (重点) 理解钩子函数的作用 (难点) 掌握Vue.js过滤器的使用方法 了解Vue.js事件的深入用法 (重点) 二.仿写留言板 2.1.实现" ...
- axios vue 动态date_Web前端Vue系列之-Vue.js 实战
课程简介: 课程目标:通过本课程的学习,让大家掌握Vue.js的进阶知识并在项目中应用. 适用人群:具有一定vue开发基础的开发人员. 课程概述:Vue (读音 /vjuː/,类似于 view) 是一 ...
- 为Angular(2+)开发人员提供带TypeScript的Vue.js
目录 介绍 单页应用程序的演变(SPA) 三大框架概述 Angular开发者的Vue.js 学习Vue.js Vue.js页面的剖析 构建示例应用程序 TypeScript的案例 入门--Vue.js ...
- Vue.js ( 比JQuery更加精简的前端框架)
Vue.js简介 什么是 Vue 什么是 Vue? 考虑这个需求: 我们要把一个 json对象的数据,显示到一个元素上去. 如果不使用 Vue, 那么就会用到 JS 或者 JQuery,通过操作 H ...
最新文章
- 某程序员吐槽:提离职后领导开始演戏,假装不知道我工资低,对我进行挽留,怎么办?...
- Informatica ETL workflow 定时运行功能介绍 scheduler
- 设计模式-单例模式(1)
- 【PhotoScan精品教程】任务一:新建工程、导入照片、设置坐标系、导入控制点(POS)、自由空三
- HMTL label标签
- 微软2022服务器,​微软公开地分享了即将发布的WindowsServer 2022的特性
- kubernetes集群搭建
- Spring源码之ApplicationContext(六)注册BeanPostProcessor
- (转)从业10年,芝加哥交易员王辰解码高频交易
- 僵尸网络瞄准Linux服务器
- idm由于法律原因无法下载怎么办?
- 习惯三:要事第一--自我管理的原则
- 几何分布的概率和期望
- SQL Server 常用查询练习
- 【AI每日播报】马云启动NASA计划 Intel150亿美元收购Mobileye
- 北京理工大学:《Python语言程序设计》____笔记整理
- 小白鼠与毒药解题过程分析
- Mathcad使用数学表达式
- 403错误怎么解决:盘点常见的IIS 403错误网页
- adobe全系列最新安装教程
热门文章
- 纪念我曾经的 JAVA 姿势--转
- jackson反序列化时忽略不需要的字段
- php中的单引号、双引号和转义字符
- 2020年最新前端学习路线
- Java Review - 并发编程_StampedLock锁探究
- 每日一博 - Semaphore使用场景分析以及源码分析
- 白话Elasticsearch42-深入聚合数据分析之案例实战__bucket filter:统计牌品最近一个月的平均价格(Filter Aggregation)
- Android Studio报Element XXXX must be declared的解决方法
- php中如何上传非表单类数据,PHP Post获取不到非表单数据的问题解决办法
- MySQL与Redis一致性解决同步问题