过滤器filter
过滤器可以用在两个地方:双花括号插值和 v-bind 表达式
<!-- 在双花括号中 -->
{{ message | capitalize }}
<!-- 在 `v-bind` 中 -->
<!-- :id被绑定的属性 (如style,href 等)
rawId data中的值
formatId 过滤器中的值
-->
<div v-bind:id="rawId | formatId"></div>
全局过滤器
Vue.filter('capitalize', function (value) {
if (!value) return ''
value = value.toString()
return value.charAt(0).toUpperCase() + value.slice(1)
})
组件内过滤器
filters: {
capitalize: function (value) {
if (!value) return ''
value = value.toString()
return value.charAt(0).toUpperCase() + value.slice(1)
}
}
当全局过滤器和局部过滤器重名时,会采用局部过滤器。
过滤器使用示例
实现效果
具体代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>过滤器字符串首字母变大小写</title>
<style>
.red{
background-color: red;
}
.yellow{
background-color: yellow;
}
</style>
</head>
<body>
<div id="app">
<h2>过滤前:{{msg}}</h2>
<h2>小写后:{{msg|f1}}</h2>
<h2>大写后:{{ss|f2}}</h2>
<h2>两个过滤器后:{{ss|f2|f3}}</h2>
<h2>过滤器传参后:{{ss|f4('qq','oo')}}</h2>
<div v-for='item in list' >
<p :class='item|f5Color'>{{ss}}</p>
</div>
<p :class='msg|f5Color'>{{msg}}</p>
</div>
<script src="../js/vue.js">
</script>
<script>
//全局 优先使用局部过滤器
Vue.filter('f1',function(value){
if(!value) return ''
value =value.toString()
return value.charAt(0).toLowerCase()+value.slice(1)
})
Vue.filter('f4',function(value,a1,a2){
if(!value) return ''
value=a1+value+a2
return value
})
const app=new Vue({
el:'#app',
data:{
msg:'WcCDCVJJSNHIDIMKKCAD125csac',
ss:'wwwsw',
list:[{
type:0
},{
type:1
}
,{
type:1
},
{
type:0
},
{
type:1
}
]
},
//组件内
filters:{
f2:function(value){
if(!value) return ''
value =value.toString()
return value.charAt(0).toUpperCase()+value.slice(1)
},
f3:function(value){
value =value.toString()
value=value+'15868'
return value
},
f5Color:function(value){
return value.type!=0?'red':'yellow'
},
},
})
</script>
</body>
</html>