Vuejs2.0双向过滤器报错

<!DOCTYPE html>
<html>
<head>
	<title>自定义过滤器</title>
	<script src="js/vue.min.js"></script>
</head>
<body>
<div id="app">
    <h3>{{ msg | addZero }}</h3>
    <h3>{{ num | number(3,10) }}</h3>
    <input type="text" v-model="message">
    {{ message |currentNumber}}
</div>
<script type="text/javascript">
Vue.config.devtools = true;
		new Vue ( {
			el:'#app',
			data: {
                msg:1,
                num:3.1415926,
                message:3.1415926
			},
            filters:{
                // 单向过滤器
                addZero:function(data){
                    return data<10?'0'+data:data;
                },
                number:function(data,n,m){
                    return Number(data.toFixed(n))+m
                },
                // 双向过滤器
                currentNumber:{
                    read:function(data){ //model--->view
                        return "$"+data.toFixed(2)
                    },
                    write:function(newValue,oldValue){//view--->model
                        return +newValue.replace(/[^\d.]/g,'')
                    }
                }
            }
		} )
	</script>
</body>
</html>

双向过滤器报错

EugenioCode

浏览 2102回答 2

2回答

慕移动0472786

我也一样

冲冲冲奥利给123

{{ message |currentNumber}} ， currentNumber前面少了一个空格