Vue自定義過濾器

1、語法

//js
Vue.fiflter('過濾器名稱',過濾器函數(shù))
//html
<h2>{{data | 過濾器名稱(參數(shù)) }}</h2>

這里的參數(shù)沒有可以不寫

2、定義過濾器(全局)

例1：

//例如定義一個過濾器，作用是如果這個數(shù)小于10，比如說是8，就顯示成08，如果大于10 就正常顯示
//js,這是一個全局方法
<script>
    Vue.fiflter('number',function(data){
        return data<10?'0'+data:data
    })

    var app = new Vue({
      el: '#app',
      data: {
        message: 'Hello Vue!'
      }
    })
</script>
//html
<h2>{{8 | number}}</h2>  //08
<h2>{{18 | number}}</h2>  //18

例2：

//例如定義一個過濾器，將一個數(shù)保留指定位數(shù)的小數(shù)
//js,這是一個全局方法
<script>
 Vue.fiflter('number',function(data,n){
      console.log(data)  //18.67868
      console.log(n)  //3
      return data.toFixed(n)
 })

 var app = new Vue({
    el: '#app',
    data: {
       message: 'Hello Vue!'
    }
</script>
//html
<h2>{{18.67868 | number(3)}}</h2>  //18.679
這里的參數(shù)可以傳多個

3、定義過濾器(局部)

//例如定義一個過濾器，將一個數(shù)保留指定位數(shù)的小數(shù)
//js,這是一個全局方法
<script>
 var app = new Vue({
    el: '#app',
    data: {
       message: 'Hello Vue!'
    }，
    filter:{
        number:function(data,n){
            console.log(data)  //18.67868
            console.log(n)  //3
            return data.toFixed(n)
        }
    }
</script>
//html
<h2>{{18.67868 | number(3)}}</h2>  //18.679
這里的參數(shù)可以傳多個
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點，簡書系信息發(fā)布平臺，僅提供信息存儲服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容