filters
过滤器一般用于文本格式化。过滤器可以用在两个地方:双花括号插值和v-bind
表达式
<!-- 在双花括号差值 -->
{{ msg | capitalize }}
<!-- 在v-bind -->
<div v-bind:id="rawId | formatId"></div>
filters
的简单例子:首字母大写以及保留两位小数
<body>
<div id="app">
<!-- 这里代表用后面的方法处理前面的值 -->
{{name | firstToUpperCase}}
<!-- 不作处理的sum:0.30000000000000004 -->
<!-- 使用filter实现保留两位小数 -->
{{sum | toFix}}
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
new Vue({
el: '#app',
data() {
return {
name: 'leo',
x: 0.1,
y: 0.2
}
},
// filter好用,但是不能滥用,一般用来格式化一些字符串
filters: {
// 方法接收一个参数,这个参数就是使用方法时前面的值,这样就可以在方法里处理值,并返回
// 首字母大写
firstToUpperCase(val) {
return val.slice(0,1).toUpperCase() + val.slice(1)
},
// 保留两位小数
toFix(val) {
return val.toFixed(2)
}
},
computed: {
sum() {
return this.x + this.y
}
}
})
</script>
</body>
filters实际的应用场景
比如订单的状态
<body>
<div id="app">
{{orderStatus | formOrderStatus}}
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
new Vue({
el: '#app',
data() {
return {
// 假设这个值是后端返回的的数据
orderStatus: '002'
}
},
filters: {
formOrderStatus(val) {
// 这里是和后端约定的好不同的值代表不同状态
const orderStatusMap = {
'001': '未付款',
'002': '已付款',
'003': '已发货',
'004': '已签收',
'005': '已评价',
}
return orderStatusMap[val]
}
}
})
</script>
</body>