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>