vue中的过滤器filter

一、filter是什么？

Vue.js 允许你自定义过滤器，可被用于一些常见的文本格式化。

二、使用步骤

过滤器可以用在两个地方：

1. 双花括号插值
2. v-bind 表达式 (后者从 2.1.0+ 开始支持)。
   过滤器应该被添加在 JavaScript 表达式的尾部，由“管道”符号指示：

<!-- 在双花括号中 -->
{{ message | capitalize }}

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

1.Element-UI中的应用

关键代码如下（示例）：

<el-table-column prop="count" align="center" label="统计值">
    <template slot-scope="scope">
        {{scope.row.count|formatColumnText}}
    </template>
</el-table-column>

<el-table-column prop="count" align="center" label="统计值">
    <template slot-scope="scope">
        {{formatColumnText2(scope.row.count)}}
    </template>
</el-table-column>

export default {
    filters:{
        formatColumnText(val){
            if(!val){
                return "-"
            }else{
                return val
            }
        }
    }，
    methods:{
    	formatColumnText2(val){
            if(!val){
                return "-"
            }else{
                return val
            }
        }
    }
}

将表格中为空的字段格式化用“-”显示

总结

1、filters：访问不到vue 实例，适合对数据进行筛选、数据格式化。
2、methods：可以访问vue 实例，其他同filters。
3、computed：不能传参，不支持异步，只能监听现有属性，通过现有的属性计算出一个新的属性。属性依赖改变，自动调用对应的方法，并进行缓存；当改变其他数据时，computed 属性并不会重新计算，从而提升性能。
4、watch：监听现有属性，属性需要先声明，一旦属性发生了改变就去自动调用对应的方法。watch不会缓存数据，每次打开页面都会重新加载一次。当需要在数据变化时执行异步或开销较大的操作时，这个方式是最有用的。
参考：https://blog.csdn.net/FantasyBreaker/article/details/123094063