Vue2中使用过滤器返回对应的价格格式

过滤器的作用:将数组按照我们需要的格式进行展示 ,

比如:我想要一次性更改掉大量数据的样式,就可以使用过滤器

局部过滤器

注意el绑定了的是当前需要作用到的局部

//语法: {{数据名 | 需要返回的函数值 }}
并且在new Vue中需要绑定 filters:{}

<div id='app'>
        <p>总价:{{total | RMBFormat}}</p>
</div>
 <script> 
        new Vue({
            el: '#app',
            data: {
                total: 1998.564128
            },
            filters: {
                RMBFormat(value) { 
                    //使用value接收 | 前面的值,此处即为"total"
                    return "¥" + value.toFixed(2) + "元"
         }}})
</script>

过滤器可以多个并列使用

<p>{{ price | discountFn | filprice }}</p>

但需要注意: 从左到右的先后顺序,右侧的会调用左侧的数据变为形参val再次进入相对应的过滤器

 

全局过滤器

由Vue提供的方法

解决了局部过滤器因为绑定元素而造成局部变量的限制

<div id='app'>
        <p>总价:{{total | RMBFormat}}</p>
</div>

Vue.filter('自定义的方法名', value => {
            return "¥" + value.toFixed(2) + "元"
        });