WebVue驿站前端Vue专辑

Vue-过滤器(系统过滤器和自定义过滤器)

2019-05-17  本文已影响0人  瑟闻风倾

1. 系统过滤器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>Document</title>
    <script type="text/javascript" src="../vue1026.js"></script>
</head>
<body>
    <div id="app">
        <!-- 在vue2.0中已弃用系统过滤器但保留了自定义过滤器，自定义过滤器的用法和系统过滤器的用法一致 -->
        <div>(0)原字符：{{text1}}</div>
        <div>(1)系统过滤器capitalize-首字符大写：{{text1 | capitalize}}</div>
        <div>(2)系统过滤器uppercase-小写转大写：{{text1 | uppercase}}</div>
        <div>(3)系统过滤器lowercase-大写转小写：{{text1 | lowercase}}</div>
        <div>(4)系统过滤器currency-数字转货币-默认美元：{{number1 | currency}}</div>
        <div>(4)系统过滤器currency-数字转货币-过滤器加参数：{{number1 | currency '¥'}}</div>
        <div>(5)系统过滤器pluralize-字符加后缀：{{text1}}{{text1 | pluralize '.png'}}</div>
        <div>(6)系统过滤器-对象转json：{{list | json}}</div>
        <div>(6)系统过滤器-对象转json同时小写转大写：{{list | json | uppercase}}</div>

        <div>(7)系统过滤器-debounce：</div>
        <div>(8)系统过滤器-limitBy：从开始位置开始显示几个</div>
        <div v-for="item in list1 | limitBy 10">
            <span>{{item}}</span>
        </div>
        <div>(8)系统过滤器-limitBy：从哪个位置开始显示几个</div>
        <div v-for="item in list1 | limitBy 10 5">
            <span>{{item}}</span>
        </div>
        <div>(9)系统过滤器-filterBy：参考案例的使用</div>
        <div>(10)系统过滤器-orderBy：排序</div>

    </div>
</body>
<script type="text/javascript">
    var vm = new Vue({
        el:"#app",
        data:{
            text1:"aBc",
            number1:654321,
            list:[
                {name:"小祁",age:18},
                {name:"小卫",age:20}
            ],
            list1:["火龙果","哈密瓜","猕猴桃","苹果","冬瓜","水蜜桃","圣女果","西瓜","黄桃","无花果","南瓜","樱桃","千禧果","北瓜","仙桃","黄瓜","冬枣","西红柿","龙眼","西柚"],
        }
    });
</script>
</html>

eg1：利用vue1.0中的系统过滤器filterBy实现列表按条件刷选查询

条件刷选.png 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>Document</title>
    <style type="text/css">
        #title{
            width: 800px;
            margin: 20px auto;
        }
        #tb{
            width: 800px;
            border-collapse: collapse;
            margin: 20px auto;
        }
        #tb th{
            background-color: #0094ff;
            color: white;
            font-size: 16px;
            padding: 5px;
            text-align: center;
            border: 1px solid black;
        }
        #tb td{
            padding: 5px;
            text-align: center;
            border: 1px solid black;
        }
    </style>
    <script type="text/javascript" src="../vue1026.js"></script>
</head>
<body>
    <div id="app">
        <div id="title">
            <input type="text" placeholder="请输入编号" v-model="id">
            <input type="text" placeholder="请输入名称" v-model="name">
            <button @click="addData">添加</button>

            <!-- 在vue1.0中有一个filterBy系统过滤器来实现按条件刷选数据,vue2.0中已弃用系统过滤器但保留了自定义过滤器 -->
            <input type="text" placeholder="请输入名称关键字进行搜索" v-model="keyName">
        </div>
        
        <table id="tb">
            <tr>
                <th>编号</th>
                <th>名称</th>
                <th>创建时间</th>
                <th>操作</th>
            </tr>
            <tr v-if="list.length == 0">
                <td colspan="4">当前列表无数据</td>
            </tr>
            <!-- v-for的特点：当list发生改变时，vue.js会自动调用v-for重新生成数据，即自动完成数据刷新工作 -->
            <tr v-for="item in list | filterBy keyName in 'name'">
                <td>{{item.id}}</td>
                <td>{{item.name}}</td>
                <td>{{item.creatTime}}</td>
                <!-- href="#"和href="javascript:void(0)"并未看出区别 -->
                <td><a href="javascript:void(0)" @click="deleteData(item.id)">删除</a></td>
            </tr>
        </table>
    </div>
</body>
<script type="text/javascript">
    var vm = new Vue({
        el:"#app",
        data:{
            list:[
                {id:1,name:"火龙果",creatTime:new Date()},
                {id:2,name:"哈密瓜",creatTime:new Date()},
                {id:3,name:"猕猴桃",creatTime:new Date()},
                {id:4,name:"苹果",creatTime:new Date()},
                {id:5,name:"冬瓜",creatTime:new Date()},
                {id:6,name:"水蜜桃",creatTime:new Date()},
                {id:7,name:"圣女果",creatTime:new Date()},
                {id:8,name:"西瓜",creatTime:new Date()},
                {id:9,name:"黄桃",creatTime:new Date()},
                {id:10,name:"无花果",creatTime:new Date()},
                {id:11,name:"南瓜",creatTime:new Date()},
                {id:12,name:"樱桃",creatTime:new Date()},
                {id:13,name:"千禧果",creatTime:new Date()},
                {id:14,name:"北瓜",creatTime:new Date()},
                {id:15,name:"仙桃",creatTime:new Date()},
                {id:16,name:"黄瓜",creatTime:new Date()},
                {id:17,name:"冬枣",creatTime:new Date()},
                {id:18,name:"西红柿",creatTime:new Date()},
                {id:19,name:"龙眼",creatTime:new Date()},
                {id:20,name:"西柚",creatTime:new Date()}
                
            ],
            id:"",
            name:"",
            keyName:""
        },
        methods:{
            addData:function(){
                if(this.id != "" && this.name != ""){
                    this.list.push({id:this.id,name:this.name,creatTime:new Date});
                    this.id = "";
                    this.name = "";
                }else{
                    alert("编号或名称为空！")
                }
            },
            deleteData:function(id){
                if(!confirm("确认删除?")){
                    return;
                }
                //数组的findIndex(参数为一个回调函数)方法：根据id获取索引值
                var index = this.list.findIndex(function(item){
                    return id == item.id;
                });
                //数组的splice(索引，个数)方法：从哪个位置删除几个元素
                this.list.splice(index,1);
            }
        }
    });
</script>
</html>

2. 自定义过滤器

2.1 自定义私有过滤器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>Document</title>
    <script type="text/javascript" src="../vue1026.js"></script>
</head>
<body>
    <span>区域1：</span>
    <div id="app">
        {{time}}
        <br/>
        {{time | dateFormat}}
    </div>

    <span>区域2：</span>
    <!-- 私有过滤器在监管区域外不起作用 -->
    <div id="app1">
        {{time}}
        <br/>
        {{time | dateFormat}}
    </div>
</body>
<script type="text/javascript">
    var vm = new Vue({
        el:"#app",
        data:{
            time:new Date()
        },
        //私有过滤器：在某一个Vue对象中定义的过滤器称为私有过滤器。私有过滤器只能在当前Vue对象的el指定的监管区域起作用。
        filters:{
            dateFormat:function(oldDate){
                var newDate = "";
                var year = oldDate.getFullYear();
                var month = oldDate.getMonth()+1;
                var day = oldDate.getDay();
                newDate = year + "-" + month + "-" + day;
                return newDate;
            }
        }
    });
    var vm1 = new Vue({
        el:"#app1",
        data:{
            time:new Date()
        }
    });
</script>
</html>

2.1 自定义全局过滤器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>Document</title>
    <script type="text/javascript" src="../vue1026.js"></script>
</head>
<body>
    <span>区域1：</span>
    <div id="app">
        {{time}}
        <br/>
        {{time | dateFormat}}
    </div>

    <span>区域2：</span>
    <div id="app1">
        {{time}}
        <br/>
        {{time | dateFormat}}
    </div>
</body>
<script type="text/javascript">
    //定义全局过滤器(放在Vue实例化对象后为什么不起作用？)：Vue.filter(过滤器名称,过滤器的逻辑处理函数);
    Vue.filter("dateFormat",function(oldDate){
        var newDate = "";
        var year = oldDate.getFullYear();
        var month = oldDate.getMonth()+1;
        var day = oldDate.getDay();
        newDate = year + "-" + month + "-" + day;
        return newDate;
    });

    var vm = new Vue({
        el:"#app",
        data:{
            time:new Date()
        }
    });

    var vm1 = new Vue({
        el:"#app1",
        data:{
            time:new Date()
        }
    });

</script>
</html>

eg2：利用自定义过滤器实现日期格式化

日期格式化.png 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>Document</title>
    <style type="text/css">
        #title{
            width: 800px;
            margin: 20px auto;
        }
        #tb{
            width: 800px;
            border-collapse: collapse;
            margin: 20px auto;
        }
        #tb th{
            background-color: #0094ff;
            color: white;
            font-size: 16px;
            padding: 5px;
            text-align: center;
            border: 1px solid black;
        }
        #tb td{
            padding: 5px;
            text-align: center;
            border: 1px solid black;
        }
    </style>
    <script type="text/javascript" src="../vue1026.js"></script>
</head>
<body>
    <div id="app">
        <div id="title">
            <input type="text" placeholder="请输入编号" v-model="id">
            <input type="text" placeholder="请输入名称" v-model="name">
            <button @click="addData">添加</button>

            <!-- 在vue1.0中有一个filterBy系统过滤器来实现按条件刷选数据,vue2.0中已弃用系统过滤器但保留了自定义过滤器 -->
            <input type="text" placeholder="请输入名称关键字进行搜索" v-model="keyName">
        </div>
        
        <table id="tb">
            <tr>
                <th>编号</th>
                <th>名称</th>
                <th>创建时间</th>
                <th>操作</th>
            </tr>
            <tr v-if="list.length == 0">
                <td colspan="4">当前列表无数据</td>
            </tr>
            <!-- v-for的特点：当list发生改变时，vue.js会自动调用v-for重新生成数据，即自动完成数据刷新工作 -->
            <tr v-for="item in list | filterBy keyName in 'name'">
                <td>{{item.id}}</td>
                <td>{{item.name}}</td>
                <!-- 在vue2.0中过滤器与参数间的空格改为括号，即：{{item.creatTime | dateFormat('yy-MM-dd HH:mm:ss')}} -->
                <td>{{item.creatTime | dateFormat 'yy-MM-dd HH:mm:ss'}}</td>
                <!-- href="#"和href="javascript:void(0)"并未看出区别 -->
                <td><a href="javascript:void(0)" @click="deleteData(item.id)">删除</a></td>
            </tr>
        </table>
    </div>
</body>
<script type="text/javascript">
    Vue.filter("dateFormat",function(oldDate,formatString){
        var newDate = "";
        var year = oldDate.getFullYear();
        var month = oldDate.getMonth()+1;
        var day = oldDate.getDay();
        if(formatString == "yy-MM-dd"){
            newDate = year + "-" + month + "-" + day;
        }else{
            newDate = year + "-" + month + "-" + day + " 16:21:13";
        }
        return newDate;
    });

    var vm = new Vue({
        el:"#app",
        data:{
            list:[
                {id:1,name:"火龙果",creatTime:new Date()},
                {id:2,name:"哈密瓜",creatTime:new Date()},
                {id:3,name:"猕猴桃",creatTime:new Date()},
                {id:4,name:"苹果",creatTime:new Date()},
                {id:5,name:"冬瓜",creatTime:new Date()},
                {id:6,name:"水蜜桃",creatTime:new Date()},
                {id:7,name:"圣女果",creatTime:new Date()},
                {id:8,name:"西瓜",creatTime:new Date()},
                {id:9,name:"黄桃",creatTime:new Date()},
                {id:10,name:"无花果",creatTime:new Date()},
                {id:11,name:"南瓜",creatTime:new Date()},
                {id:12,name:"樱桃",creatTime:new Date()},
                {id:13,name:"千禧果",creatTime:new Date()},
                {id:14,name:"北瓜",creatTime:new Date()},
                {id:15,name:"仙桃",creatTime:new Date()},
                {id:16,name:"黄瓜",creatTime:new Date()},
                {id:17,name:"冬枣",creatTime:new Date()},
                {id:18,name:"西红柿",creatTime:new Date()},
                {id:19,name:"龙眼",creatTime:new Date()},
                {id:20,name:"西柚",creatTime:new Date()}
                
            ],
            id:"",
            name:"",
            keyName:""
        },
        methods:{
            addData:function(){
                if(this.id != "" && this.name != ""){
                    this.list.push({id:this.id,name:this.name,creatTime:new Date});
                    this.id = "";
                    this.name = "";
                }else{
                    alert("编号或名称为空！")
                }
            },
            deleteData:function(id){
                if(!confirm("确认删除?")){
                    return;
                }
                //数组的findIndex(参数为一个回调函数)方法：根据id获取索引值
                var index = this.list.findIndex(function(item){
                    return id == item.id;
                });
                //数组的splice(索引，个数)方法：从哪个位置删除几个元素
                this.list.splice(index,1);
            }
        }
    });
</script>
</html>
上一篇下一篇

猜你喜欢

热点阅读