Vue過濾器（列表中多種狀態的顯示）

過濾器

1.什麼是過濾器？

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

<!-- 在雙花括號中 -->
{{ message | capitalize }}

<!-- 在 `v-bind` 中 -->
<div v-bind:id="rawId | formatId"></div>

2.如何使用？

通常有兩種使用方式，一種是在組件中定義一個本地的過濾器，可以這樣定義：

filters: {
  capitalize: function (value) {
    if (!value) return ''
    value = value.toString()
    return value.charAt(0).toUpperCase() + value.slice(1)
  }
}

另一種就是定義全局的過濾器，我們可以新建一個js文件，將定義的過濾器導出，在實例化vue對象之前將其引入，

//filter.js
// 所有頁面過濾器可以統一放在這裏，標明過濾器的功能
const vFilter = {
    // 截取當前數據到小數點後2位 
    numFilter2(value) {
        let realVal = Number(value).toFixed(2)
        return realVal
    },
    capitalize(value) {
        if (!value) return ''
        value = value.toString()
        return value.charAt(0).toUpperCase() + value.slice(1)
    }

}
export default vFilter

在main.js中註冊

//main.js
//增加公共過濾 filter
import vueFilter from './assets/js/filter.js'
for (let key in vueFilter) {
    Vue.filter(key, vueFilter[key])
}

然後便可以在組件中使用了

//test.vue
<span>{{item.allocation_count | numFilter2}}</span>元

3 在table中使用

// 先定一個對象，來存放各種狀態和其他的附加屬性
const appTypeMap = {
    0: {
        text: '狀態1',
        color: {'background': '#5ac1ff'}
    },
    1: {
        text: '狀態2',
        color: {'background': '#f8af59'}
    },
    2: {
        text: '狀態3',
        color: {'background': '#8689ff'}
    },
    3: {
        text: '狀態4',
        color: {'background': '#4aceb9'}
    }
}

然後定義相應的過濾器

// 狀態文本過濾器
statusFilter(status) {
    return appTypeMap[status].text
},
// 狀態樣式過濾器
appStyleFilter(status) {
    return appTypeMap[status].color
}

在列表中使用

 <tr v-for="(item,index) in itemList" :key="index">
    <td>
        <div class="app_type" :style="item.package_type | appStyleFilter">
       		 {{ item.package_type | statusFilter }}
        </div>
    </td>
</tr>