Vuejs双向过滤器报错
来源:3-5 事件绑定-内置事件绑定、自定义事件绑定

EugenioCode
2017-05-20
<!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>
双向过滤器报错,用的2.0的版本
写回答
1回答
-
我没用过双向过滤器,你可以参考一下这块: https://cn.vuejs.org/v2/guide/migration.html#Two-Way-Filters-replaced
这里是说双向过滤有隐含的问题,也给出了解决方法,2.0是否支持read和write我不清楚。
看报错,应该是说过滤器没有绑定一个方法,导致的
currentNumber:{
read:function(data){ //model--->view
return "$"+data.toFixed(2)
},
write:function(newValue,oldValue){//view--->model
return +newValue.replace(/[^\d.]/g,'')
}
}
这里的右侧,是个对象
012017-07-10
相似问题