經過事例講解若是在 Vue 建立及使用過濾器

時間  2020-06-21
標籤 經過 事例 講解 若是 vue 建立 使用 過濾器 简体版
原文   原文鏈接
做者：Ed Zynda

譯者：前端小智
來源：scotch.io前端

點贊再看，養成習慣

本文 GitHub https://github.com/qq44924588... 上已經收錄，更多往期高贊文章的分類，也整理了不少個人文檔，和教程資料。歡迎Star和完善，你們面試能夠參照考點複習，但願咱們一塊兒有點東西。vue

與 AngularJS 相似，Vue.js 也有本身的數據轉換和過濾方法，可是必須記住，過濾器並不改變原始數據，它們只改變輸出並返回過濾後的數據。過濾器在不少不一樣的狀況下都頗有用，好比保持API響應儘量乾淨，在前端處理數據的格式。但願經過將全部邏輯封裝在可重用代碼塊以後來避免重複和鏈接的狀況下，它們一樣很是有效。git

定義和使用過濾器

使用 Vue，咱們能夠經過兩種不一樣的方式註冊過濾器：全局和本地。 前者方式能夠訪問全部組件中的過濾器，然後者則只能在定義該組件的組件內部使用過濾器。github

過濾器是簡單的 JS 函數，它們將要轉換的值做爲第一個參數，可是也能夠傳入儘量多的其餘參數來返回該值的格式化版本。面試

全局過濾器

全局過濾器以下所示：vue-router

// 在此示例中，咱們將註冊一個全局過濾器用來在價格前面添加美圓符號：

// 聲明
Vue.filter('toUSD', function (value)) {
  return `$${value}`
}
// 使用
<div id="app">
  <span>{{ 351.99 | toUSD }}</span>
</div>

過濾器定義必須始終在主Vue實例之上，不然會獲得一個Failed to resolve filter: toUSD錯誤。json

// DECLARATION
Vue.filter('toUSD', function (value) {
    return `$${value}`;
});

new Vue({
    el: '#app',

     data: {
        price: 351.99
    }
});

// USAGE
<div id="app">
  <span>{{ price | toUSD }}</span>
</div>

本地過濾器

本地過濾器註冊到一個Vue組件做用域中，來看看如何建立：數組

// 在此示例中，咱們將建立一個過濾器，將字符串變成大寫。

// 聲明
new Vue({
    el: '#app',

    data: {
        name: 'scotch.io'
    },

    filters: {
       // Filter definitions
        Upper(value) {
            return value.toUpperCase();
        }
    }
});

// 用法
<div id="app">
  <span>{{ name | Upper }}</span>
</div>

如上面的示例中看到的那樣，本地過濾器做爲「filters」屬性內的函數存儲在Vue組件中。 咱們能夠註冊任意多個：微信

...
    filters: {
        Upper(value) {
              return value.toUpperCase();
        },
        Lower(value) {
            return value. toLowerCase();
        },
    }
....

附加參數設置

正如咱們在本文引言中所提到的，過濾器能夠根據須要接受任意多個參數app

// 聲明
Vue.filter('readMore', function (text, length, suffix) {
    return text.substring(0, length) + suffix;
});

new Vue({
    el: '#app',

    data: {
        text: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit. Non ab modi repellendus labore facere, fugiat ipsam quae accusantium commodi voluptas nesciunt dolor similique ipsum accusamus earum eligendi suscipit laborum quod.'
    }
});

// 用法
<div id="app">
  <span>{{ text | readMore(10, '...') }}</span>
</div>

在此示例中，咱們建立了一個名稱爲「readMore」的過濾器，該過濾器會將字符串的長度限制爲給定的字符數，而且還會在其中添加所選擇的後綴。 Vue.js 將要過濾的值做爲第一個參數 text 傳遞，length 和 suffix 做爲第二個和第三個參數傳遞。

鏈式過濾器

關於過濾器，我最喜歡的一點是可以使用管道(|)符號將它們連接起來，並經過一系列轉換器運行單個值。再舉一個價格的例子，咱們想限制價格的小數位以及加價格的單位。

// JS
Vue.filter('toFixed', function (price, limit) {
    return price.toFixed(limit);
});

Vue.filter('toUSD', function (price) {
    return `$${price}`;
});

new Vue({
    el: '#app',

    data: {
        price: 435.333
    }
});

// HTML

<div id="app">
  <span>{{ price | toFixed(2) | toUSD }}</span>
</div>

示例

接下來，咱們經過一些事例來鞏固一下。

將 JS 值轉換爲JSON字符串

// JS
Vue.filter('json', function (value) {
    return JSON.stringify(value);
});

new Vue({
    el: '#app',

    data: {
        user: {
            username: 'johndoe',
            email: 'john@example.com',
            countryCode: 'U.K.'
        }
    }
});


// HTML
<div id="app">
  <span>{{ user | json }}</span>
</div>

從對象數組中提取屬性值列表

Vue.filter('pluck', function (objects, key) {
    return objects.map(function(object) { 
        return object[key];
    });
});

new Vue({
    el: '#app',

    data: {
        users: [
        {
            "id": 4,
            "first_name": "Eve",
            "last_name": "Holt"
        },
        {
            "id": 5,
            "first_name": "Charles",
            "last_name": "Morris"
        },
        {
            "id": 6,
            "first_name": "Tracey",
            "last_name": "Ramos"
        }
        ]
    }
});


// HTML

<div id="app">
  <span>{{ users | pluck('last_name') }}</span>
</div>

返回給定索引處的元素

Vue.filter('at', function (value, index) {
    return value[index];
});

new Vue({
    el: '#app',

    data: {
        videos: ['Zi_XLOBDo_Y', 'sOnqjkJTMaA', 'sOnqjkJTMaA']
    }
});

// HTML
<div id="app">
  <span>{{ videos | at(1) }}</span>
</div>

返回給定列表中的最小值

// JS
Vue.filter('min', function (values) {
    return Math.min(...values);
});

new Vue({
    el: '#app',

    data: {
        ages: [23, 19, 45, 12, 32]
    }
});

// HTML

<div id="app">
  <span>{{ ages | min }}</span>
</div>

隨機排列元素列表：

Vue.filter('shuffle', function (values) {
    for (var i = values.length - 1; i > 0; i--) {
        var j = Math.floor(Math.random() * (i + 1));
        var temp = values[i];
        values[i] = values[j];
        values[j] = temp;
    }
    return values;
});

new Vue({
    el: '#app',

    data: {
        cards: ['Lahire', 'Judith', 'Lancelot', 'Alexandre']
    }
});

// HTML

<div id="app">
  <span>{{ cards | shuffle }}</span>
</div>

返回數組的第一個元素：

Vue.filter('first', function (values) {
    if(Array.isArray(values)) {
        return values[0];
    }
    return values;
});

new Vue({
    el: '#app',

    data: {
        consoles: ['PlayStation', 'Nintendo DS', 'Xbox', 'Atari']
    }
});

// HTML
<div id="app">
  <span>{{ consoles | first }}</span>
</div>

返回數組的最後一個元素

Vue.filter('last', function (values) {
    if(Array.isArray(values)) {
        return values[values.length - 1];
    }
    return values;
});

new Vue({
    el: '#app',

    data: {
        consoles: ['PlayStation', 'Nintendo DS', 'Xbox', 'Atari']
    }
});

// HTML
<div id="app">
  <span>{{ consoles | last }}</span>
</div>

返回過濾指定元素的數組的副本

Vue.filter('without', function (values, exclude) {
    return values.filter(function(element) {
        return !exclude.includes(element);
    });
});

new Vue({
    el: '#app',

    data: {
        unpaidInvoices: ['#1001', '#1002', '#1003', '#1004']
    }
});

// HTML
<div id="app">
  <span>{{ unpaidInvoices | without('#1003') }}</span>
</div>

刪除數組中重複的元素

Vue.filter('unique', function (values, unique) {
    return values.filter(function(element, index, self) {
        return index == self.indexOf(element);
    });
});

new Vue({
    el: '#app',

    data: {
        recentViewedPosts: [13, 43, 23, 13, 43, 3, 98, 42, 65]
    }
});

// HTML

<div id="app">
  <span>{{ recentViewedPosts | unique }}</span>
</div>

在字符串後加上文本

Vue.filter('prepend', function (string, prepend) {
    return `${string}${prepend}`;
});

new Vue({
    el: '#app',

    data: {
        greeting: 'Hello'
    }
});

// HTML
<div id="app">
  <span>{{ greeting | prepend(' World!') }}</span>
</div>

重複一個字符串n次

Vue.filter('repeat', function (string, times) {
    return string.repeat(times);
});

new Vue({
    el: '#app',

    data: {
        greeting: 'Hello'
    }
});

// HTML

<div id="app">
  <span>{{ greeting | repeat(3) }}</span>
</div>

總結

但願讀者們從這篇文章中能學到了一些東西，如今知道如何建立和使用過濾器，最重要的是，你如今能夠重構你的代碼，用過濾器來清理它。

代碼部署後可能存在的BUG無法實時知道，過後爲了解決這些BUG，花了大量的時間進行log 調試，這邊順便給你們推薦一個好用的BUG監控工具 Fundebug。

原文：https://scotch.io/tutorials/g...

交流

文章每週持續更新，能夠微信搜索「 大遷世界 」第一時間閱讀和催更（比博客早一到兩篇喲），本文 GitHub https://github.com/qq449245884/xiaozhi 已經收錄，整理了不少個人文檔，歡迎Star和完善，你們面試能夠參照考點複習，另外關注公衆號，後臺回覆福利，便可看到福利，你懂的。

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程