17.自定义时间格式全局过滤器.html

最新推荐文章于 2022-10-22 15:27:29 发布

这瓜保熟么

最新推荐文章于 2022-10-22 15:27:29 发布

阅读量419

点赞数 1

分类专栏： vue

本文链接：https://blog.csdn.net/luzhensmart/article/details/84204938

版权

vue 专栏收录该内容

41 篇文章 0 订阅

订阅专栏

<!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>

    <!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u"
        crossorigin="anonymous">

    <script src="./lib/vue.js"></script>

</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>
                    <!-- bootstrap中input添加.form-control类，表示为input元素添加表单控件；
                     可以为标签元素添加CSS定制样式。
                -->
                    Id:<input type="text" class="form-control" v-model="id">
                </label>

                <label>
                    Name:<input type="text" class="form-control" v-model="name">
                </label>

                <label>
                    搜索name关键字:<input type="text" class="form-control" v-model="keywords">
                </label>

                <!-- @click="add"调用add函数不能传参数 
                     @click="add()"调用add函数 可以进行传参 -->
                <input type="button" value="添加" class="btn btn-primary" @click="add">
            </div>
        </div>


        <table class="table table-striped table-bordered">
            <thead>
                <tr class="active">
                    <th>Id</th>
                    <th>Name</th>
                    <th>Ctime</th>
                    <th>Operation</th>
                </tr>
            </thead>
            <tbody>
                <!-- 思路是过滤list 将符合条件的数据放到一个新List里 然后再for循环遍历 -->
                <tr v-for="item in search(keywords)" :key="item.id">
                    <td>{{item.id}}</td>
                    <!-- v-text 等同于上面的表达式 -->
                    <td v-text="item.name"></td>
                    <td>{{item.ctime | dataFormat('yyyy-MM-dd hh:mm:ss')}}</td>
                    <!-- 禁止事件的默认行为 此处就是禁止了超链接跳转标签的作用 -->
                    <td><a href="" @click.prevent="del(item.id)">删除</a></td>
                </tr>
            </tbody>
        </table>

    </div>


    <script>

        //注意 这是全局过滤器 如果再有<div id="app2"></div> 和一个vue2对象 那么过滤器也是生效的

        //默认给pattern一个默认值 防止上面的函数不穿值 导致undefined
        Vue.filter('dataFormat', function (dateStr, pattern="") {

            //将字符串转化成Date类型 yyyy-mm-dd
            var dt = new Date(dateStr);
            //取出年 月 日 用-拼接起来
            var y = dt.getFullYear();
            //dt.getMonth()从0开始 要+1 不足两位 前面补0 比如1月 01月
            var m = (dt.getMonth() + 1).toString().padStart(2,"0");
            //不足2位 前面补0
            var d = dt.getDate().toString().padStart(2,"0");

            if ('yyyy-mm-dd' == pattern.toLowerCase(pattern)) {
                // var formatDateStr = y +'-'+ m +'-'+d;
                // return formatDateStr;

                //相当于上面的 注意切换英文输入法 连着按两下esc下面的间隔号按键
                return `${y}-${m}-${d}`;
            } else {
                //返回时分秒
                //不足2位 前面补0
                var hh = dt.getHours().toString().padStart(2, "0");
                //不足2位 前面补0
                var mm = dt.getMinutes().toString().padStart(2, "0");
                //不足2位 前面补0
                var ss = dt.getSeconds().toString().padStart(2, "0");

                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() },
                    { id: 3, name: '路虎', ctime: new Date() }
                ]
            },
            methods: {
                add() {
                    var car = { id: this.id, name: this.name, ctime: new Date() };
                    this.list.push(car);

                    //添加完 文本框要恢复空白
                    this.id = '';
                    this.name = '';
                },
                del(id) {
                    //根据id查找出该条数据在数组中的位置 然后删除
                    //splice() 方法向/从数组中添加/删除项目，然后返回被删除的项目。
                    //some() 方法会依次执行数组的每个元素：
                    //如果有一个元素满足条件，则表达式返回true , 剩余的元素不会再执行检测。
                    //如果没有满足条件的元素，则返回false。

                    //方法1
                    // this.list.some((item,i) => {
                    //     if(item.id = id){
                    //         this.list.splice(i,1);
                    //         return true;
                    //     }
                    // });

                    //方法2
                    //查找数组中元素的位置
                    var index = this.list.findIndex(item => {
                        if (item.id = id) {
                            return true;
                        }
                    });

                    this.list.splice(index, 1);
                },
                //方式1
                // search(keywords){
                //     var newList = [];
                //     this.list.forEach(element => {
                //         //遍历的数据中 包含输入的关键字
                //         if(element.name.indexOf(keywords)!=-1){
                //             newList.push(element);
                //         }
                //     });
                //     return newList;
                // },
                //方式2
                search(keywords) {

                    var newList = this.list.filter(element => {
                        if (element.name.includes(keywords)) {
                            return element;
                        }
                    });

                    return newList;
                }
            }
        })

    </script>

</body>

</html>

这瓜保熟么

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
17.自定义时间格式全局过滤器.html

&lt;!DOCTYPE html&gt;&lt;html lang="en"&gt;&lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&gt;
复制链接

扫一扫