vue基础-过滤器(Filters)
vue过滤器使用方法以及应用场景
·
目的: 转换格式, 过滤器就是一个函数, 传入值返回处理后的值(由管道符调用)
Vue中的过滤器场景
过滤器只能用在, <插值表达式和v-bind表达式>
例子:全局定义
Vue.filter("过滤器名", (值) => {return "返回处理后的值"}
字母转大写, 输入"hello", 输出"HELLO"
Vue.filter('filterA',(val) =>val.toUpperCase())
Vue.config.productionTip =false
<template>
<div>
<h5>原始数据:{{ message }}</h5>
<h5>使用全局过滤器实现数据大写:{{message | filterA}}</h5>
</div>
</template>
<script>
export default {
data(){
return{
message:'hello'
}
}
};
</script>
局部定义
filters: {过滤器名字: (值) => {return "返回处理后的值"}
第一个字符小写, "输入HELLO", 输出"hELLO"语法:
过滤器传参: vue变量 | 过滤器(实参)
多个过滤器: vue变量 | 过滤器1 | 过滤器2
<template>
<div>
<h5>原始数据:{{ message }}</h5>
<a href="#" :title="message | filterB">使用局部过滤器实现数据大写</a>
//可以传多个过滤器
<h5>多个过滤器使用:{{message | filterA |filterC}}</h5>
<p>原来的样子: {{ msg }}</p>
<!-- 1.
给过滤器传值
语法: vue变量 | 过滤器名(值)
-->
<p>使用翻转过滤器: {{ msg | reverse('|') }}</p>
<!-- 2.
多个过滤利使用
语法: vue变量 | 过滤器1 | 过滤器2
-->
<p :title="msg | toUp | reverse('|')">鼠标长停</p>
</div>
</template>
<script>
export default {
filters: {
filterB(val){
return val.toUpperCase()
},
filterC(val){
return val.charAt(0).toLowerCase() + val.slice(1)
//字符串拼接方法 将第一个首字母改为小写 后面是大写
}
},
data(){
return{
message:'hello'
}
}
};
</script>
总结: 过滤器可以传参, 还可以对某个过滤器结果, 后面在使用一个过滤器
过滤器注意点
- 要定义到filter节点上,本质是一个函数
- 在过滤器函数中,一定要有return值
- 在过滤器的形参中,就可以获取到管道符前面待处理的那个值
- 如果全局过滤器和私有过滤器名字一致,此时按照“就近原则”调用的是私有过滤器
更多推荐
已为社区贡献1条内容
所有评论(0)