vue.filter&computed

DOCTYPE html >

< html >

< head >

< meta charset= "UTF-8" >

< title >vue自定义过滤器 title >

< script src= "https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js" > < / script >

< meta name= "viewport" content= "width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scala

    ble=no" />

head >

< body >

< div class= "test" >

< p >{{message | sum}} p >

< p >{{message | cal(10 , 20)}} p >

< p >{{message | sum | currency }} p >

< input type= "text" v-model= "ToNumber" >

div >

< script type= "text/javascript" >

// -----------------------------------------华丽分割线(从model->view)---------------------------------------

Vue. filter( "sum", function ( value) { //全局方法 Vue.filter() 注册一个自定义过滤器,必须放在Vue实例化前面

return value + 4;

});

Vue. filter( 'cal', function ( value, begin, xing) { //全局方法 Vue.filter() 注册一个自定义过滤器,必须放在Vue实例化前面

return value + begin + xing;

});

Vue. filter( 'currency', function( value){

return value + '$';

})

new Vue({

el: ".test",

data: {

message: 12

},

computed:{

ToNumber:{

set : function( value){

this. message = new Number( value);

},

get : function(){

return this. message;

}

}

}

//计算属性将被混入到 Vue 实例中。所有 getter 和 setter 的 this 上下文自动地绑定为 Vue 实例。

//注意如果你为一个计算属性使用了箭头函数，则 this 不会指向这个组件的实例，不过你仍然可以将其实例作为函数的第一个参数来访问。

});

< / script >

body >

html >