vue过滤器的使用方式

316 阅读1分钟
过滤器的定义 ,value是使用过滤器时,管道符前面的值
Vue.filter('formatMoney', value => {
    //这里返回的值会最终渲染在页面上
     return ''
 })
过滤器的使用
{{money | formatMoney}}

千分位添加逗号

<body>
    <div id="app">
        {{money | formatMoney}}
    </div>
    <script>
        Vue.filter('formatMoney', val => {
            return val.toLocaleString();
        })
        const vm = new Vue({
            el: '#app',
            data: {
                money: 10000000000000
            }
        });
    </script>
</body>
过滤器传参
{{ money | formatMoney(2)}}
多个过滤器的使用
{{money | formatMoney | ceshi}}

⚠️⚠️⚠️注意, 这里测试过滤的不是钱第一个money 而是被formatMoney 过滤后的返回内容,再通过测试过滤

局部过滤器的定义
const vm = new Vue({
    el: '#app',
    filters: {
        //第一个值是需要被过滤的值,第二个可以是传的参数,根全局过滤器使用方式一样
        formatMoney: (val,times) => {
        
        }
    }
});

🚬兄弟都这么熟了,说两句再走呗,点个赞也行啊👍🚬