Vue过滤器
自定义过滤器
// 首字母大写
Vue.filter("upper", function(val){
return val.charAt(0).toUpperCase() + val.slice(1)
})
// 首字母小写
Vue.filter("lower", function(val){
return val.charAt(0).toLowerCase() + val.slice(1)
})
const app = new Vue({
el: "#app",
data: {
msg: ""
}
})
<div id="app">
<input type="text" v-model="msg">
<div>{{ msg | upper }}</div>
<div>{{ msg | upper | lower }}</div>
</div>
实现效果图
另外过滤器还可以定义在属性上,如下用法
<div id="app">
<input type="text" v-model="msg">
<div>{{ msg | upper }}</div>
<div>{{ msg | upper | lower }}</div>
<div :abc="msg | upper">测试数据</div>
</div>
局部过滤器
filters: {
"upper": function(val) {
return val.charAt(0).toUpperCase() + val.slice(1)
}
}
<div id="app">
<input type="text" v-model="msg">
<div>{{ msg | upper }}</div>
</div>
同样可以实现相同的效果
带参数的过滤器
Vue.filter("format", function(value, arg){
if(arg == "yyyy-MM-dd"){
var result = ""
result += value.getFullYear() + "-" + (value.getMonth() + 1) + "-" + value.getDate()
// console.log(result);
return result;
}
})
const app = new Vue({
el: "#app",
data: {
date: new Date()
}
})
<div id="app">
<div>{{ date | format("yyyy-MM-dd") }}</div>
</div>
输出结果
2020-11-2
“app”>
{{ date | format(“yyyy-MM-dd”) }}
```
输出结果
2020-11-2