过滤

Vue.js 允许你自定义过滤器，可被用于一些常见的文本格式化。过滤器可以用在两个地方：双花括号插值和 v-bind 表达式 (后者从 2.1.0+ 开始支持)。过滤器应该被添加在 JavaScript 表达式的尾部，由“管道”符号指示：
示例：

<!-- 在双花括号中 -->
{{ message | capitalize }}
<!-- 在 `v-bind` 中 -->
<div v-bind:id="rawId | formatId"></div>

局部过滤器

filters: {
  capitalize: function (value) {
    if (!value) return ''
    // 对数据的操作
    return value
  }
}

全局过滤器

Vue.filter('capitalize', value => {})

参数

当过滤器形式为 msg | filter 时，filter过滤器接收一个参数，参数为msg。
当过滤器形式为 msg | filter('a')时，filter过滤器接收两个参数，参数为msg, 'a'

过滤器串联

{{ msg | filterA | filterB }}

在这个例子中，filterA的参数为msg，filterB的参数为filterA。
示例

    <section id="app">
        {{ msg | filter-one | filter-two }}
    </section>
    <script>
        Vue.filter('filter-one',value=>{
            return '我是全局过滤器:filter-one'
        })
        Vue.filter('filter-two',value=>{
            return '我是全局过滤器:filter-two'
        })
        const vm = new Vue ({
            el:'#app',
            data:{
                msg:213456,
            },
        })
    </script>

最终输出为

练习

首字母大写

    <section id="app">
        {{ msg | capitalize}}
    </section>
    <script>
        Vue.filter('capitalize',val => {
            if(!val) return
            return val.charAt().toUpperCase() + val.slice(1)
        })
        const vm = new Vue({
            el:'#app',
            data:{
                msg:'china'
            },
        })
    </script>

format-money

    <section id="app">
        {{ msg | formatMoney}}
    </section>
    <script>
        Vue.filter('formatMoney',val => {
            if(!val) return
            return val.toLocaleString('de-DE', { style: 'currency', currency: 'CNY' })
        })
        const vm = new Vue({
            el:'#app',
            data:{
                msg: Math.floor(Math.random() * 10000)
            },
        })
    </script>

数字添加文字“万”

    <section id="app">
        {{ msg | addWord}}
    </section>
    <script>
        Vue.filter('addWord',val => {
            if(!val) return
            return  val = val > 10000 ? (val/10000).toFixed(1)+'万':val
        })
        const vm = new Vue({
            el:'#app',
            data:{
                msg: Math.floor(Math.random() * 10000000)
            },
        })
    </script>