技術標籤：vue前端過濾器vuehtmljavascript前端

Vue.js 允許你自定義過濾器，可被用於一些常見的文字格式化。過濾器可以用在兩個地方：雙花括號插值和 v-bind 表示式 (後者從
2.1.0+ 開始支援)。過濾器應該被新增在 JavaScript 表示式的尾部，由“管道”符號指示。

Vue為我們提供了兩種過濾器的使用，分別是區域性過濾器和全域性過濾器。
過濾器的作用，其實就可以簡單理解為，為資料添油加醋。
比如，我們後臺給我們返回了一堆的商品的價格，後臺只是給我們提供了阿拉伯數字12345，但是我們前端需要展示的時候，大部分是要帶上￥$這種單位符號的。這時候，就輪到我們過濾器發揮了。

下面是區域性過濾器的使用場景和基本語法格式：

<div id="app">
    <h3>{{price | myPrice('￥')}}</h3>
</div>  

<script>
    var app = new Vue({
        el:'#app',
        data:{
            price:10,
        },
        // 區域性過濾器
        filters: {
            myPrice:function(price,a){
                return
 
 a + price;
            }
        }
    });
</script>

這就是我們提到的，給價格新增單位的場景，我們在vue例項中，寫了一個和data同級的屬性filters:{}，我們用 | 和{{}}中的數值進行了繫結，然後在myPrice中，就可以操作我們的數值了，而且是批量操作的，並且可以攜帶引數。

這樣我們就可以批量給資料“添油加醋了”。

下面我們說一下全域性過濾器的註冊和使用：

   <div id="app">
        <h3>{{msg | myReverse}}</h3>
 

    </div>  

<script>
    Vue.filter('myReverse',(val) => {
        return val.split('').reverse().join('');
    })
    var app = new Vue({
        el:'#app',
        data:{
            msg:'hello 過濾器'
        }
    });
</script>

我們註冊了一個全域性的過濾器，用於反轉msg字串的內容。
用法和區域性過濾器一樣， | 關聯。

這就是區域性過濾器和全域性過濾器的基本語法格式和應用場景。

要根據具體的業務需求，將其應用進去。
當你覺得用現在的方法處理現在的業務場景很繁瑣、很反人類、浪費很多不必要的時間的時候，一定是你有技術沒有用到。
Vue發展了這麼久，多次的版本更新，現在的生態已經很棒了，要多將Vue提供的技術應用到實際的開發中，這樣才能體現出框架的價值，提高程式設計師的工作效率。

有微信小程式課設、畢設需求聯絡個人QQ：505417246

關注下面微信公眾號，可以領取微信小程式、Vue、TypeScript、前端、uni-app、全棧、Nodejs、Python等實戰學習資料
最新最全的前端知識總結和專案原始碼都會第一時間釋出到微信公眾號，請大家多多關注，謝謝！