如果我有一个简单的过滤器,请说:
Vue.filter('foo', function (value) {
return value.replace(/foo/g, 'bar');
});
Run Code Online (Sandbox Code Playgroud)
还有一个简单的组件:
Vue.component('example', {
props: {
msg: String,
},
});
Run Code Online (Sandbox Code Playgroud)
在标记内:
<example inline-template :msg="My foo is full of foo drinks!">
{{ msg }}
</example>
Run Code Online (Sandbox Code Playgroud)
我可以简单地应用过滤器:
<example inline-template :msg="My foo is full of foo drinks!">
{{ msg | foo }}
</example>
Run Code Online (Sandbox Code Playgroud)
我可以在模板中轻松应用过滤器,但是我想将该逻辑移回组件中.
它不需要是过滤器,但基本上是为数据字段创建getter和setter的方法.
就像是:
Vue.component('example', {
props: {
msg: {
type: String,
getValue: function(value) {
return value.replace(/foo/g, 'bar');
},
}
},
});
Run Code Online (Sandbox Code Playgroud)