Vue全局過濾器的使用

參考： https://www.cnblogs.com/liujn0829/p/8622960.html
https://blog.csdn.net/z8735058/article/details/76824548

一、單個過濾器

參考 https://cn.vuejs.org/v2/guide/filters.html

eg1：把英文首字母變為大寫

    <div id="app">
         輸入框
        <input type="text" v-model="content" @change="changeEvent">
         <!-- 顯示層，后邊加一個過濾器處理函數，把英文首字母變為大寫 -->
        <h3>{{viewContent | changeCapitalLetter}}</h3>
    </div>

    <script>
     let vm = new Vue({
        el:"#app",
        data:{
            viewContent:"",
            content:""    
        },
        methods:{
            changeEvent(){
                this.viewContent = this.content;
            }
        },
        filters:{
            changeCapitalLetter(value){//value是輸入框的內容，也是要顯示的內容
                if(value){
                    let str = value.toString();
                    //獲取英文，以空格分組把字符串轉為數組，遍歷每一項，第一項轉為大寫字母
                    let newArr = str.split(" ").map(ele=>{
                       return ele.charAt(0).toUpperCase() + ele.slice(1)
                    });
                    return newArr.join(" ")  //數組轉字符串 以空格輸出。。。
                }
            }
        }
     })
    </script>

二、多個過濾器

新建 dfilter.js 文件

const dfilters = {
    addZeroTwo: function(value) {
        var value = Math.round(parseFloat(value) * 100) / 100;   //注: 一定要用var聲明，let會報錯
        var arr = value.toString().split('.');
        if (arr.length === 1) {
            return value.toString() + '.00';
        } else {
            if (arr[1].length === 1) {
                return value.toString() + '0';
            }
        }
    },
    addZeroOne: function(value) {
        var value = Math.round(parseFloat(value) * 100) / 100;
        var arr = value.toString().split('.');
        if (arr.length === 1) {
            return value.toString() + '.0';
        } else {
            if (arr[1].length === 1) {
                return value.toString() + '0';
            }
        }
    }
}
export default dfilters;

在main.js中引入並注冊（在new Vue前注冊）

import dfilters from '../static/js/dfilters';
for (let key in dfilters) {
    Vue.filter(key, dfilters[key]);
}

在組件中使用

<span>原價:¥{{shopgoods.gprice|addZeroTwo}}</span>