Vue_过滤器

基础

　　可以用全局方法 Vue.filter() 注册一个自定义过滤器，它接收两个参数：过滤器ID和过滤器函数。过滤器函数以值为参数，返回转换后的值：Vue.filter('split0', function (value) {
return value.split('.')[0];
})
html代码：<div id="demo">{{msg|split0}}</div>
js代码：Vue.filter('split0', function (value) {
return value.split('.')[0];
})
var vm=new Vue({
el: '#example',
data:{
msg:'2.0'}
})
过滤器函数可以接收任意数量的参数：Vue.filter('wrap', function (value, begin, end) {
return begin + value + end;
})

<!-- 'hello' => 'before hello after' -->
<span>{{msg | wrap 'before' 'after'}}</span>

双向过滤器

　　我们使用过滤器都是在把来自模型的值显视在视图之前转换它。不过也可以定义一个过滤器，在把来自视图（< input > 元素）的值写回模型之前转化它，如下代码：Vue.filter('currencyDisplay', {
// model -> view
// 在更新 `<input>` 元素之前格式化值
read: function(val) {
return '￥'+val.toFixed(2)
},
// view -> model
// 在写回数据之前格式化值
write: function(val, oldVal) {
var number = +val.replace(/[^\d.]/g, '')
return isNaN(number) ? 0 : parseFloat(number.toFixed(2))
}
})
html代码如下：<div id="example">
<input type="text" v-model="msg|currencyDisplay"><br>
<span>{{msg}}</span>
</div>