vue过滤器对时间格式的处理

最新推荐文章于 2023-07-07 11:13:08 发布

原创最新推荐文章于 2023-07-07 11:13:08 发布 · 1k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#vue

vue 专栏收录该内容

4 篇文章

订阅专栏

本文介绍了一个使用Vue.js实现的品牌管理应用案例，包括数据的动态添加、删除及基于关键字的搜索功能。通过局部过滤器实现了日期格式化显示，展示了Vue.js在数据绑定和动态操作方面的强大能力。

1、效果图

2、局部过滤器案例

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title></title>
        <link href="../css/bootstrap.min.css" rel="stylesheet">
        <script src="../js/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 from-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>
                <input type="button" class="btn btn-primary" value="添加" @click="add">
                <label>
                    搜索名称关键字：
                    <input type="text" class="form-control" v-model="keyword">
                </label>
            </div>
        </div>
        <table class="table table-bordered table-hover table-striped">
            <thead>
                <tr>
                    <th>Id</th>
                    <th>Name</th>
                    <th>Ctime</th>
                    <th>操作</th>
                </tr>
            </thead>
            <tbody>
                <tr v-for="item in search(keyword)" :key="item.id">
                    <td>{{item.id}}</td>
                    <td>{{item.name}}</td>
                    <td>{{item.cdate | timeDateFormat }}</td>
                    <td>
                        <a href="" @click.prevent="del(item.id)">
                            刪除
                        </a>
                    </td>
                </tr>
            </tbody>
        </table>
    </div>
<script>
    const  vm = new Vue({
        el:'#app',
        data:{
            id : '',
            name : '',
            keyword : '',
            list:  [
                        { id : 1 , name : '奔驰' , cdate : new Date() },
                        { id : 2 , name : '宝马' , cdate : new Date() },
                        { id : 3 , name : '玛莎拉蒂' , cdate : new Date() },
                        { id : 4 , name : '大奔' , cdate : new Date() },
                        { id : 5 , name : '兰德酷路泽' , cdate : new Date() },
                    ]
        },
        methods:{
            add () {
                var con = {id : this.id, name : this.name, cdate : new Date()};
                this.list.push(con);
                this.id = this.name = '';
            },
            del (id) {
                var index = this.list.findIndex( item => {
                    if(item.id == id){
                        return true;
                    }
                })
                this.list.splice(index,1)
            },
            search (keyword) {
                var arr = [];
                this.list.forEach(item => {
                    if(item.name.indexOf(keyword) != -1){
                        arr.push(item);
                    }
                })
                return arr;
            }
        },
        filters : {
            timeDateFormat : function (msg) {
                //讲字符串转为Date格式
                var mt = new Date(msg);
                //获取年份
                var year = mt.getFullYear();
                //从0开始，获取月份
                var month = (mt.getMonth() + 1).toString().padStart(2,'0');
                //获取天数
                var day = mt.getDay().toString().padStart(2,'0');
               /* if (con === 'yyyy/mm/dd'){
                    return year + "/" + month + "/" + day;
                }*/
               //获取小时
               var hh = mt.getHours().toString().padStart(2,'0');
               //获取分钟
                var mm = mt.getMinutes().toString().padStart(2,'0');
                //获取秒
                var ss = mt.getSeconds().toString().padStart(2,'0');

                return year + "/" + month + "/" + day + "/ " + hh + ":" + mm + ":" + ss;

            }
        }
    });
</script>
</body>
</html>

padStart方法


方法	说明
String.prototype.padStart(maxLength, fillString=’’)	字符串长度为maxLength，不够的在开头用fillString填充，例如 :“123”.padStart(6,“a”)=“aaa123”
String.prototype.padEnd(maxLength, fillString=’’)	这个和上面类似，是在结尾处填充，例如"123".padEnd(6,“a”)=“123aaa”