全局過濾器

<div class="app">
{{la|add}}
</div>
<script src="https://cdn.bootcss.com/vue/2.5.16/vue.js"></script>
<script>
/*Vue.filter('過濾器的名字',函數(shù))*/
    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:{
           過濾器的名字 : 函數(shù)
        }
    })*/
    new Vue({
        el:".app",
        filters:{
            add:function(data){
                return data.toFixed(2)
            }
        }
    })
</script>

計算屬性

<div class="app">{{daoxu}}</div>
<!--<div class="app">{{函數(shù)名}}</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('===');
                //              切割        翻轉(zhuǎn)       插入
            }
        }
    })
/* new Vue({
        el:'.app',
        data:{
            txt:'hello vue'
        },
        computed:{
            函數(shù)名:函數(shù)
        }
    })*/
</script>