Vue过滤器

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