vue过滤器

vue过滤器的使用：

语法：
　　<any>{{表达式 | 过滤器}}</any>

<div class="container">
    <p>{{msg}}</p>
    <h1>{{price}}</h1>
    <h1>{{price | myCurrency('￥')}}</h1>
    <h2>{{state | changestate(false)}}</h2>
</div>
<script src="js/vue.js"></script>
<script>
    new Vue({
        el:".container",
        data:{
            msg:'Hello Vue',
            price:356,
            state:'暂停',
       
        },
        //过滤器的本质就是一个有参数有返回值的方法
        filters:{
            myCurrency(myInput,arg1){
               // myInput是通过管道传来的数据
               console.log(myInput)
               //arg1在调用过滤器时在圆括号中第一个参数
               console.log(arg1);
               //根据业务的需要，对传来的数据进行处理,并返回处理后的结果
               let result=arg1+myInput;
               return result;
            },
            changestate(data,arg1){
                if(arg1){
                    return '开启'
                }else{
                    return '暂停'
                }
            }
        },
        methods:{
           
        }
    })
</script>

</body>

动手试一试。。。。。