<!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>雙向過濾器報錯
Vuejs2.0雙向過濾器報錯
EugenioCode
2017-05-20 18:45:34
