<div id="app">
<!-- <p>{{ value | filterA | filterB }}</p> -->
<p>{{ value | filterC('qqq-', 200) }}</p>
</div>
<script>
/* Vue.filter('filterA', function (value) {
console.log(value, 'filterA');
return value.split('-').join('');
});
Vue.filter('filterB', function (value) {
console.log(value, 'filterB');
return value[0].toUpperCase() + value.slice(1);
}) */
Vue.filter('filterC', function (par1, par2, par3) {
return par2 + par1.split('-').join('');
});
new Vue({
el: '#app',
data: {
value: 'a-b-c'
}
});
<div id="app">
<!-- <p>{{ content | filterA }}</p>
<p>{{ content2 | filterA }}</p> -->
<p>{{ content | filterA | filterB }}</p>
<p>{{ content | filterA | filterC('lagou-') }}</p>
</div>
new Vue({
el: '#app',
data: {
content: 'a-b-c',
content2: 'x-y-z'
},
filters: {
filterA: function (value) {
return value.split('-').join('');
},
filterB: function (value) {
return value.split('').reverse().join('');
},
filterC (value, prefix) {
return prefix + value;
}
}
});
局部过滤器优先于全局过滤器