Vue学习12-----过滤器之私有过滤器

最新推荐文章于 2022-10-12 09:31:27 发布

小虾米的成长之路

最新推荐文章于 2022-10-12 09:31:27 发布

阅读量183

点赞数

分类专栏： Vue 文章标签： vue 过滤器私有过滤器

本文链接：https://blog.csdn.net/baidu_41690072/article/details/102881810

版权

Vue 专栏收录该内容

25 篇文章 1 订阅

订阅专栏

PS:

过滤器执行顺序符合就近原则：

即：当私有过滤器和全局过滤器重名时，执行的是私有过滤器

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="./lib/vue.js"></script>
    <link rel="stylesheet" href="./lib/bootstrap.css">
</head>
</body>
<div id="app">


    <div class="panel panel-primary">
        <div class="panel-heading">
            <h3 class="panel-title">添加人员</h3>
        </div>
        <div class="panel-body form-inline">
            <label>
                ID:
                <input type="text" class="form-control" v-model="id">
            </label>
            <label>
                Name:
                <input type="text" class="form-control" v-model="name">
            </label>
            <!--在vue中绑定方法时，加()和不加()都一样，但是加()就可以给方法传参数了-->
            <input type="button" value="添加" class="btn btn-primary" @click="add()">
            <label>
                搜索名称关键字:
                <input type="text" class="form-control" v-model="keywords">
            </label>
        </div>
    </div>




    <table class="table table-bordered table-hover table-striped">
        <thead>
            <tr>
                <th>ID</th>
                <th>NAME</th>
                <th>Ctime</th>
                <th>Operation</th>
            </tr>
        </thead>
        <tbody>
            <!-- <tr v-for="item in list" :key="item.id"> -->
            <tr v-for="item in search(keywords)" :key="item.id">
                <td>
                    {{item.id}}
                </td>
                <td v-text="item.name"></td>
                <td>
                    <!-- {{item.Ctime | dateFormat}} -->
                    {{item.Ctime | dateFormat('')}}
                </td>
                <td>
                    <!--prevent防止点击删除的时候刷新页面-->
                    <a href="" @click.prevent="del(item.id)"> 删除 </a>
                </td>
            </tr>
        </tbody>
    </table>


</div>
<div id="app2">
    {{dt | dateFormat}}
</div>

<body>

    <script>
        //创建过滤器(必须创建在vue对象之前)
        //Vue.filter('过滤器名称',function(){})
        //过滤器钟的function第一个参数是固定的data，是指‘|’前传过来的数据
        //pattern="" ES6中为pattern赋默认值
        Vue.filter('dateFormat', function (dateStr, pattern = "") {
            //根据给定的时间字符串拼接处特定的时间
            var dt = new Date(dateStr);
            //yyyy-MM-dd
            var y = dt.getFullYear();
            var m = dt.getMonth();
            var d = dt.getDate();
            // return y+'-'+m+'-'+d;
            if (pattern.toLowerCase == 'yyyy-MM-dd') {
                //模板字符串
                return `${y}-${m}-${d}`;
            } else {
                var hh = dt.getHours();
                var mm = dt.getMinutes();
                var ss = dt.getSeconds();
                return `${y}-${m}-${d} ${hh}:${mm}:${ss}`;
            }


        })

        var vm = new Vue({
            el: '#app',
            data: {
                id: '',
                name: '',
                keywords: '',
                list: [
                    { id: 1, name: '张三', Ctime: new Date() },
                    { id: 2, name: '李四', Ctime: new Date() }
                ]
            },
            methods: {
                add() {
                    //1、获取id和name，直接从上面data中获取

                    //2、组织出一个对象
                    var people = { id: this.id, name: this.name, Ctime: new Date() }
                    //3、把这个对象添加到list中
                    this.list.push(people)
                    //4、v-model已经双向绑定了

                },
                del(id) {
                    // //1、如何根据id找到要删除这一项的索引
                    // this.list.some((item,i)=>{
                    //     if(item.id==id){
                    //         //在数组的some方法中，如果return true，就会立即终止这个数组的后续循环
                    //         this.list.splice(i,1)
                    //         return  true;
                    //     }
                    // })
                    // //2、找到索引后，直接调用splice方法
                    var index = this.list.findIndex(item => {
                        if (item.id == id) {
                            return true;
                        }
                    })
                    this.list.splice(index, 1)
                },
                search(keywords) {
                    var newList = [];
                    //方法1：
                    //    this.list.forEach(item=> {
                    //        if(item.name.indexOf(keywords)!=-1){
                    //            newList.push(item);
                    //        }
                    //    });
                    //    return newList;
                    //方法2：
                    //forEcach some filter findIndex 都属于数组新方法
                    //都会对数组进行遍历，执行相关操作
                    // newList = this.list.filter(item=>{
                    //     //在ES6钟提供了一个新方法，String.prototype.includes('包含的字符串')
                    //     //包含返回true，否则返回false
                    //     if(item.name.includes(keywords)){
                    //         return item;
                    //     }
                    // })
                    // return newList;
                    //方法3：
                    return this.list.filter(item => {
                        if (item.name.includes(keywords)) {
                            return item;
                        }
                    })
                }
            }
        });
        //私有过滤器
        var vm2 = new Vue({
            el: '#app2',
            data: {
                dt: new Date(),
            },
            methods: {},
            filters: {
                dateFormat: function (dateStr, pattern = '') {
                    //根据给定的时间字符串拼接处特定的时间
                    var dt = new Date(dateStr);
                    //yyyy-MM-dd
                    var y = dt.getFullYear();
                    var m = dt.getMonth();
                    var d = dt.getDate();
                    // return y+'-'+m+'-'+d;
                    if (pattern.toLowerCase == 'yyyy-MM-dd') {
                        //模板字符串
                        return `${y}-${m}-${d}------`;
                    } else {
                        var hh = dt.getHours();
                        var mm = dt.getMinutes();
                        var ss = dt.getSeconds();
                        return `${y}-${m}-${d} ${hh}:${mm}:${ss}----`;
                    }
                }
            }
        })

    </script>

</html>
<!--
    过滤器调用格式
    正常输出：{{name}}
    调用过滤：{{name | 过滤器名称}}
-->

小虾米的成长之路

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Vue学习12-----过滤器之私有过滤器

PS:过滤器执行顺序符合就近原则：即：当私有过滤器和全局过滤器重名时，执行的是私有过滤器<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width,...
复制链接

扫一扫

专栏目录