20.过滤器.html

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app">
    //参数用空格隔开 <br>
    {{'abcdfgs' | capitalize 2 6}} <br>
    {{'abcdfgs' | uppercase}} <br>
    {{'ABCDEFG' | lowercase}} <br>
    //第一个参数是添加开头符号  第二个参数 是保留多少位 <br>
    {{123.43123 | currency '￡' 5}} <br>
    //除了1都是 单个 <br>
    {{6}}{{1 | pluralize 'item'}} <br>
    //最大到9
    {{9 | pluralize 'item' 'item2' 'item3' 'item4' 'item5' 'item6' 'item7' 'item8' 'item9' 'item10' 'item11'}}
    <pre>{{json | json 4}}
    </pre>
    给事件进行延迟 事件名后 | debounce 5000

   <!-- <button @click="count+=2">下一页</button>
    <div v-for="a in arr | limitBy 2 count">
        {{a.name}}
    </div>-->
    <!--//在具体的属性值里进行筛选
    <div v-for="a in arr | filterBy '1' in 'age'">
        {{a.name}}
    </div>-->
    //排序根据正1和-1进行排序
    <button @click="flag*=-1">正反</button>
    <div v-for="a in arr | orderBy 'name' flag">
        {{a.name}}
    </div>


    {{'abcdefg' | capitalize 2}}
</div>
<script src="vue.js"></script>
<script>
    //
    /*app.filter('myFilter', function () {
        return function (input,len) {
            return input.slice(0,len).toUpperCase()+input.slice(len)
        }
    })*/

    //重写vue自带的
    //自定义过滤器 默认首字母大写  指定几个大写
    //val 是要格式化数据的内容
    //begin 是开始 end 是结束
    Vue.filter('capitalize', function (val,begin,end) {
        //传入的第一个值 | capitalize 2 4
        return val.slice(0,begin).toUpperCase()+val.slice(begin);
    });

    var vm = new Vue({
        el:"#app",
        data:{
            count:0,
            flag:-1,
            json:{name:1},
            arr:[
                {name:'jw1',age:1},
                {name:'jw2'},
                {name:'jw3'},
                {name:'jw4',age:1},
                {name:'jw5'},
                {name:'jw6'},
                {name:'jw7',age:1},
                {name:'jw8'},
                {name:'jw9'},
                {name:'jw10'},
                {name:'jw11'},
                {name:'jw12'},
                {name:'jw13'},
            ]
        }
    })
</script>
</body>
</html>