过滤器用法的举例

早安喵咪~

对昨天的怠惰而没有举例的filter部分进行举例。

关于过滤器的使用

    <div id="app1">
        <div>{{message | Upper}}</div>
        <div>{{message2 | Lowwer}}</div>
        <div v-for="book in books">{{book.name}}:{{book.price | Price}}</div>
        总价:{{getTotalPrice()}}
    </div>

	//全局过滤器
    Vue.filter('Lowwer',(e)=>{
        return e.toLowerCase();
    });
    const app1 = new Vue({
        el:'#app1',
        data:{
            message:'hello!',
            message2:'HELLOa!',
            books:[{name:'人间失格',price:19.9},{name:'罗生门',price:21}]
        },
        //局部过滤器
        filters:{
            Upper(e){
                return e.toUpperCase();
            },
            Price(e){
                return '￥' + parseFloat(e).toFixed(2);
            }
        },
        methods: {
            getTotalPrice(){
                let totalPrice = 0;
                //for in用法
                // for(let i in this.books){
                //     totalPrice += this.books[i].price;
                // }
                //forEach用法
                // this.books.forEach(function(book){
                //     totalPrice += book.price;
                // });
                //for of用法 ES6新增
                for(let book of this.books){
                    totalPrice += book.price;
                }
                return '￥'+totalPrice.toFixed(2);
            }
        },
    });