vue关于filters过滤器初级使用

过滤器用于渲染数据，比如保留小数(vue会将小数点后为0的数据统统转化为整数类型)，比如将数据前加入货币符

过滤器分为全局和局部，这里讲局部

filters与methods,computed同级，且filter类型通常为函数类型

语法：   <h1>{{  原数据    |    过滤器名  }}</h1>   //  “  | ”  意为分隔符

通常用于在mustache语法或者：bind指令中

案例： 将遍历数据保留后两位并在数据前加$符号

data:

      bookPrice: [1, 2, 2, 3, 5, 9]

 

web：

 <h1 v-for='item in bookPrice'>{{item | getPrices }}</h1>
        <!-- item: 原数据，getNumbers 过滤器名，两者之间使用 “|”分隔开 -->

 

filters:

 getPrices(item) {
                    return '$' + item.toFixed(2)
                }

 

这样就完成了数据的二次渲染。

以上。