过滤器

1、使用Vue.filter()进行全局定义

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="js/vue-2.6.14.js"></script>
    <script src="js/filters.js"></script>
</head>
<body>
    <div id="app">
        <p>{{price|rmb(3)}}</p>
        <p>{{price|rmb(2)|money}}</p>
    </div>
    <script>
        const vm = new Vue({
            el:"#app",
            data(){
                return {
                    price: 1180330.65322
                }
            },
            methods:{

            }
        })
    </script>
</body>
</html>

　　

2、在vue对象中通过filters属性来定义

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="js/vue-2.6.14.js"></script>
</head>
<body>
    <div id="app">
        <p>{{price|rmb(3)}}</p>
        <p>{{price|rmb(2)|money}}</p>
    </div>
    <script>
        const vm = new Vue({
            el:"#app",
            data(){
                return {
                    price: 1180330.65322
                }
            },
            methods:{

            },
            filters:{ // 局部过滤器, 只能在当前vm对象的控制范围内使用
                rmb(data,len=2){
                    return parseFloat(data.toFixed(len));
                },
                money(data){
                    return data.toLocaleString();
                }
            }
        })
    </script>
</body>
</html>

　　

posted @ 2021-10-01 21:00  映辉  阅读(35)  评论(0)    收藏  举报