Vue filters 过滤器
Vue 大约 1472 字说明
只适用于Vue2
、Vue1
,在Vue3
中已移除。
私有过滤器
插值表达式{{ }}
中使用管道符|
连接过滤器函数。
filters
中定义自定义的过滤器函数。
<div id="app">
{{ username | customerFilter}}
</div>
<script>
const vm = new Vue({
el: "#app",
data: {
username: "张三",
},
filters: {
// 形参 val 是管道符 | 前面的变量
customerFilter(val) {
// 过滤器中一定要有返回值
return "私有过滤器 " + val
}
}
});
</script>
全局过滤器
Vue.filter
中定义全局过滤器。
全局过滤器和私有过滤器同名时,优先选择私有过滤器。
<div id="app">
{{ username | customerFilter}}
<br>
{{ username | customerFilter | customerFilter2}}
<br>
{{ username | customerFilter3('hi', 'hello')}}
</div>
<script>
// Vue3 中已不支持过滤器
// 私有过滤器优先级高于全局过滤器
Vue.filter("customerFilter", function (val) {
return "全局过滤器 " + val;
})
// 过滤器本质是 JS 函数,可以传参,从第二个参数开始,第一参数必须是管道符前的变量
Vue.filter("customerFilter3", function (val, arg1, arg2) {
return "全局过滤器3 " + val + arg1 + arg2;
})
const vm = new Vue({
el: "#app",
data: {
username: "张三",
},
filters: {
// 形参 val 是管道符 | 前面的变量
customerFilter(val) {
// 过滤器中一定要有返回值
return "私有过滤器 " + val
},
customerFilter2(val) {
return "私有过滤器2 " + val
}
}
});
</script>
</body>
</html>
阅读 94 · 发布于 2023-01-04
————        END        ————
Give me a Star, Thanks:)
https://github.com/fendoudebb扫描下方二维码关注公众号和小程序↓↓↓

昵称:
随便看看
换一批
-
MySQL 查询冗余索引阅读 2126
-
JavaScript 监听标签页切换阅读 1001
-
Docker 查看镜像分层信息阅读 359
-
Android ScrollView 不在最顶部问题阅读 2498
-
OpenResty 中使用 ngx.share.DICT 完成内存存储阅读 4966
-
Test.class found in top-level directory (unnamed package not allowed in module)阅读 3380
-
Ubuntu 系统升级 MySQL 版本阅读 1998
-
PostgrelSQL 类似 MySQL \G 扩展显示结果阅读 2416
-
Android LinearLayout 分割线阅读 4194
-
Java jcmd 操作 JFR 飞行记录仪阅读 1426