## 过滤器
Vue.js 允许你自定义过滤器,可被用于一些常见的文本格式化
~~~
<!-- 在双花括号中 -->
{{ 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.filter('capitalize', function (value) {
if (!value) return ''
value = value.toString()
return value.charAt(0).toUpperCase() + value.slice(1)
})
~~~
过滤器可以串联:
~~~
{{ message | filterA | filterB }}
~~~
过滤器是 JavaScript 函数,因此可以接收参数
~~~
{{ message | filterA('arg1', arg2) }}
~~~
### 课后习题
1.设计一个过滤器,将页面的毫秒时间转换成可读时间
~~~
<div>{{time|readtime}}</div>
data: {
time:123232323
}
// 最终效果
<div>2012-11-12 10:10:10</div>
~~~
- Less
- 课程规划
- Less概述
- 变量
- 混合
- 嵌套
- 继承
- 导入
- 函数
- 其他
- 实战
- ES6
- 课程规划
- ES6概述
- let和const命令
- 变量的解构赋值
- 字符串扩展
- 函数扩展
- 数组扩展
- Set和Map数据结构
- Symbol
- Generator 函数
- Promise对象
- Class语法
- Module 的语法
- ES7和ES8
- 实战
- VUE
- 课程规划
- vue概述
- vue实例
- 模版语法
- 计算属性和侦听器
- Class和Style的绑定
- 条件渲染
- 列表渲染
- 事件处理
- 表单输入绑定
- 组件基础
- 过渡和动画
- 自定义指令
- 过滤器
- 响应式原理
- 实战课程
- Node
- 课程规划
- 课程概述
- node入门实例
- 模块系统
- 回调函数
- 全局对象
- 常用模块介绍
- 常用模块介绍-1
- 常用模块介绍-2
- 常用模块介绍-3
- npm使用
- express的使用
- express的使用-1
- webpack基础
- 实战
- 微信小程序
- 课程规划
- 课程概述
- 基本配置和生命周期
- wxml模版
- wxss
- wxs
- 组件
- 微信API
- 自定义组件开发
- 实战小程序
- Element
- 课程规划
- 课程概述
- 特性介绍
- 组件介绍-基础组件
- 组件介绍-表单组件
- 组件介绍-数据展示组件
- 组件介绍-提示组件
- 组件介绍-导航组件
- 组件介绍-其他组件
- 综合案例