指南
基础概要
- 安装
- 介绍
- Vue 实例
- 模板语法
- computed 属性和 watcher
- class 和 style 绑定
- 根据条件进行渲染
- 列表渲染
- 事件处理
- 表单 input 绑定
- 组件基础
过渡 & 动画
- 进入、离开和列表的过渡
深入组件
- 组件注册
- props
- 自定义事件
- slot
- 动态组件和异步组件
- Handling Edge Cases
- 状态间的过渡
可重用 & 合成
- mixin
- 自定义指令
- render 函数 & jsx
- 插件
- 过滤器
工具
- 生产环境部署
- 单文件组件
- 单元测试
- TypeScript 支持
扩展升级
- 路由
- 状态管理
- 服务端渲染
内部原理
- 深入响应式原理
升级迁移
- 从 Vue 1.x 迁移
- 从 Vue Router 0.7.x 迁移
- 从 Vuex 0.6.x 迁移到 1.0
其他更多
- 对比其他框架
- 加入 Vue.js 社区
- 认识团队
过滤器
在 Vue.js 中,可以定义过滤器(filter),常用于格式化文本。过滤器可以在两种场景中使用:双花括号插值(mustache interpolation)和 v-bind
表达式(后者在 2.1.0+ 版本支持)。过滤器应该追加到 JavaScript 表达式的末尾,以“管道符号(pipe symbol)”表示:
<!-- in mustaches --> |
你可以在组件的选项中定义局部过滤器:
filters: { |
或者在创建 Vue 示例之前,定义一个全局的过滤器:
Vue.filter('capitalize', function (value) { |
以下这个示例,我们将使用 capitalize
过滤器:
{{ message | capitalize }}
过滤器函数总是接收表达式的值(值的结果是,过滤器链中的上一个过滤器返回的值),作为第一个参数。在上面这个例子中 capitalize
过滤器函数,将 message
的值作为参数接收。
可以如下链式调用过滤器:
{{ message | filterA | filterB }} |
在这个例子中,filterA
被定义为接收单个参数的过滤器函数,表达式 message
的值将作为参数传入到函数中,然后继续调用同样被定义为接收单个参数的过滤器函数 filterB
,将 filterA
的结果传递到 filterB
中。
由于过滤器函数是 JavaScript 函数,也因此可以接收多个参数:
{{ message | filterA('arg1', arg2) }} |
这里,filterA
被定义为接收三个参数的过滤器函数。其中 message
的值作为第一个参数,普通字符串 'arg1'
作为第二个参数,表达式 arg2
取值后的值作为第三个参数。
发现错误?想参与编辑?
在 GitHub 上编辑此页!