Vue过滤器、计算属性

全局过滤

<div class="app">
{{la|add}}
</div>
<script src="https://cdn.bootcss.com/vue/2.5.16/vue.js"></script>
<script>
/*Vue.filter('过滤器的名字',函数)*/
    Vue.filter('add',function(data){
        if(data<10){
            return '0'+data
        }else {
            return data
        }
    }),
    new Vue({
        el:'.app',
        data:{
            la:Math.floor(Math.random()*20)
        }
    })
</script>

局部过滤

<div class="app">
{{123.456|add}}
</div>
<script src="https://cdn.bootcss.com/vue/2.5.16/vue.js"></script>
<script>
/* new Vue({
        el:".app",
        filters:{
           过滤器的名字 : 函数
        }
    })*/
    new Vue({
        el:".app",
        filters:{
            add:function(data){
                return data.toFixed(2)
            }
        }
    })
</script>

计算属性

<div class="app">{{daoxu}}</div>
<!--<div class="app">{{函数名}}</div>-->
<script src="https://cdn.bootcss.com/vue/2.5.16/vue.js"></script>
<script>
    new Vue({
        el:'.app',
        data:{
            txt:'hello vue'
        },
        computed:{
            daoxu:function(){
                return this.txt.split(' ').reverse().join('===');
                //              切割        翻转       插入
            }
        }
    })
/* new Vue({
        el:'.app',
        data:{
            txt:'hello vue'
        },
        computed:{
            函数名:函数
        }
    })*/
</script>