vue基础----过滤器filter

Posted 2020-12-01 moon-yyl

1.用的场景：一个功能在每个组件都能用，而computed虽然有缓存，但不能用在每一个组件，需要的话的每一个都需要写。

2.特点：改变数据的展示形式，不改变原有的形式

 分为全局与局部的

　　

    <div id="app">
    <!--{{msg | upper}} -->  
      {{msg | upper("l")}}

    </div>
    <script src="./node_modules/vue/dist/vue.js"></script>
    <script>

       /* 过滤器的参数依此在flag后面添加 */
        Vue.filter("upper",function(value,flag){
            if(flag === ‘l‘){
                return value.toLowerCase();
            }
            return value.toUpperCase();
        })

        let vm  = new Vue({
            el:"#app",
            data:{
                msg:"liLy"
            },/*
            methods:{
                getUpper(){
                    return this.msg.toUpperCase();
                }
            },
            computed:{
                getUpper(){
                    console.log("121");
                    return this.msg.toUpperCase();
                }
            }
            */
        });
    </script>