vue 过滤器

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>指令</title>
        <script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
    </head>
    <body>
        <div class="" id="myVue">
            <!-- 不传参数的过滤器-->
            <ul>
                <li v-for="item in items" >{{item.name|checkDate}}</li>
            </ul>
            <!--传参数的过滤器-->
            <ul>
                <li v-for="item in items" >{{item.name|checkDate1("$",true)}}</li>
            </ul>
            <ul>
                <li v-for="item in items" >{{item.name|checkDate1("$",false)}}</li>
            </ul>
        </div>
    </body>
    <script type="text/javascript" charset="utf-8">
        
        var vm=new Vue({
            el:"#myVue",
            data:{
                
                items: [
                  { name: '张三'  },
                  { name: '李四' },
                  { name: '王五'}
                ]
            },
            filters: {
                checkDate: function(value) {
                    return  "$$"+value//数据处理
                },
                checkDate1: function(value,date1,date2) {//value是默认传过来的数据,date1,date2是自己传过来的数据,即checkDate1("$",false)括号里的值
                    //数据处理
                    var result;
                    if(date2){
                        result=date1+""+value
                    }else{
                        result=value+""+date1
                    }
                    return result
                }
            }
            
        })
    </script>
</html>

posted @ 2019-02-13 11:20  *沧海一粟*  阅读(116)  评论(0编辑  收藏  举报