// 过滤器可以接受参数 用空格分隔
<span>{{message | reverse "参数1" "参数2"}}</span>
<script>
// 自定义过滤器
// 方式一 : 全局定义 Vue.filter('过滤器名', 方法);
Vue.filter('reverse', function (...value){
let [v1, v2, v3] = value;
return v1 + v2 + v3;
});
// 实例根元素
new Vue({
el : 'body',
data : {
message : '原始值'
}
});
</script>
// 过滤器可以接受参数 用空格分隔
<span>{{message | reverse "参数1" "参数2"}}</span>
<script>
// 局部定义
new Vue({
el : 'body',
data : {
message : '原始值'
},
// 局部定义过滤器
filters : {
reverse (...value){
let [v1, v2, v3] = value;
return v1 + v2 + v3;
}
}
});
</script>
// 动态参数 不要带引号 参数用空格分隔
<span>{{message | reverse bl1 bl2}}</span>
<script>
// 全局设置动态过滤器
Vue.filter('reverse', function (...value){
let [v1, v2, v3] = value;
return v1 + v2 + v3;
});
new Vue({
el : 'body',
data : {
message : '原始值',
// 设置动态参数值1
bl1 : '动态参数1',
// 设置动态参数值2
bl2 : '动态参数2'
}
});
</script>
// 动态参数 不要带引号 参数用空格分隔
<span>{{message | reverse bl1 bl2}}</span>
<script>
// 局部设置动态参数
new Vue({
el : 'body',
data : {
message : '原始值',
// 设置动态参数值1
bl1 : '动态参数1',
// 设置动态参数值2
bl2 : '动态参数2'
},
filters : {
reverse (...value){
let [v1, v2, v3] = value;
return v1 + v2 + v3;
}
}
});
</script>