过滤器 filters
2019-12-03 本文已影响0人
未来在奋斗
过滤器
如果需要对数据做一些格式化的操作，就可以使用过滤器了。
需求：
- 有一个 price = 10, 需要在页面上显示为 $10
- 有一个 str = 'abc', 需要在页面上显示为 Abc || ABC
- 有一个 date = 123123123123, 需要在页面上显示为 2019-12-04 12:03:56
使用
- 在 filters 选项中定义好 过滤器
- 通过 管道符号去使用过滤器即可
{{ msg | 过滤器的名字 }}
<div :id="msg | 过滤器的名字"></div>
过滤器传参
toUpperCase 这个过滤器能够接受第二个参数，isAll 值是 Boolean 类型，为true是就全部转大写，否则只首字母大写
过滤器链式调用
{{ msg | 过滤器1 | 过滤器2 | 过滤器3 }}
全局过滤器，
filters 选项设置的过滤器是局部过滤器，想要实现一个全局过滤器的话，使用
Vue.filter('过滤器名字', () => {
})
<body>
<div id="app" v-cloak>
<p>{{ price | toYuan }}</p>
<p>{{ 1000 | toYuan }}</p>
<p>{{ str | toUpperCase }}</p>
<p>{{ str | toUpperCase(true) }}</p>
<p>{{ 'abcde' | toUpperCase(true) | toLowerCase }}</p>
<p>主演：{{ actors | actorsFormat }}</p>
<hello></hello>
</div>
<script src="./js/vue.js"></script>
<script>
Vue.filter('toUpperCase', (value, isAll) => {
if (isAll) {
return value.toUpperCase()
} else {
return value.charAt(0).toUpperCase() + value.slice(1)
}
})
Vue.component('hello', {
template: `
<div>
<p>{{ 'hello' | toUpperCase }}</p>
</div>
`,
})
let vm = new Vue({
el: '#app',
data: {
price: 10,
str: 'abc',
actors: [
{
name: '张三'
},
{
name: '李四'
}
]
},
filters: {
// key: value
// key - 过滤器名字
// value - 过滤器的处理函数，这个函数会自动接受到需要过滤处理的数据
toYuan (value) {
return '$' + value
},
actorsFormat (value) {
return value.map(item => item.name).join('、')
},
