<!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>双向过滤器报错
添加回答
举报
0/150
提交
取消