11 Vue的过滤器filters

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <div id="app">
        <!--  数据price和msg通过函数myPrice和myReverse加工,再显示出来      -->
        <h3>{{price | myPrice('$')}}</h3>
        <h3>{{msg | myReverse}}</h3>
    </div>
    <script src="vue.js"></script>
    <script>
        //过滤器  数据通过过滤器,再显示出来
        //需求:为20 添加$

        //创建全局过滤器  目标数据反转
        Vue.filter('myReverse',(val) =>{
                return val.split('').reverse().join('')
        })

        new Vue({
            el:'#app',
            data:{
                price:10,
                msg:'hello'
            },
            //局部过滤器
            filters:{
                myPrice:function (price,a) {
                    return a + price

                }
            }
        })
    </script>
</body>
</html>
原文地址:https://www.cnblogs.com/wuhui1222/p/14202567.html