[JavaScript知识库] vue过滤器案例：品牌管理时间格式化中的报错问题----vue.js:634 [Vue warn]: Error in render: “TypeError: data.getFullYear is

开发: C++知识库 Java知识库 JavaScript Python PHP知识库人工智能区块链大数据移动开发嵌入式开发工具数据结构与算法开发测试游戏开发网络协议系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑笔记本显卡显示器固态硬盘硬盘耳机手机 iphone vivo oppo 小米华为单反装机图拉丁

-> JavaScript知识库 -> vue过滤器案例：品牌管理时间格式化中的报错问题----vue.js:634 [Vue warn]: Error in render: “TypeError: data.getFullYear is -> 正文阅读

[JavaScript知识库]vue过滤器案例：品牌管理时间格式化中的报错问题----vue.js:634 [Vue warn]: Error in render: “TypeError: data.getFullYear is

用vue过滤器做了一个品牌管理案例，在把页面中的数据存到localStorage缓存中后，vue报了一个错误：vue.js:634 [Vue warn]: Error in render: “TypeError: data.getFullYear is not a function”，

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

<head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css" />
    <script src="./js/vue.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
</head>

<body>
    <div id="app">
        <div class="container">
            <div class="panel panel-success">
                <div class="panel-heading">
                    <h3 class="panel-title">增删该查数据</h3>
                </div>
                <div class="panel-body">
                    <form action="" method="POST" class="form-inline" role="form">
                        <div class="form-group">
                            <label for="">id:</label>
                            <input type="number" class="form-control" id="" placeholder="Input field" v-model.value="id" />
                        </div>
                        <div class="form-group">
                            <label for="">car:</label>
                            <input type="text" class="form-control" id="" placeholder="Input field" v-model.value="car" />
                        </div>
                        <button type="button" class="btn btn-success" @click="addCar">
                添加
              </button>
                        <div class="form-group">
                            <label for="">搜索：</label>
                            <input type="text" class="form-control" id="" placeholder="Input field" v-model.value="searchCar" @change="change" />
                        </div>
                    </form>
                </div>

                <table class="table table-bordered table-hover">
                    <thead>
                        <tr>
                            <th>id</th>
                            <th>car</th>
                            <th>time</th>
                            <th>操作</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr v-for="(item,index) in change()" :key='item.id'>
                            <td>{{item.id}}</td>
                            <td>{{item.car}}</td>
                            <td>{{item.time | dataFormat('YYYY-MM-DD HH:MM:SS')}}</td>
                            <td>
                                <button type="button" class="btn btn-danger" @click="deleteCar(index)">
                    删除
                  </button>
                            </td>
                        </tr>
                    </tbody>
                </table>
            </div>
        </div>
    </div>
    <script>
        Vue.filter("dataFormat", function(data, format) {
            // console.log(format);
            let YYYY = data.getFullYear();
            let MM = (data.getMonth() + 1).toString().padStart(2, "0");
            let DD = data.getDate().toString().padStart(2, "0");
            let HH = data.getHours().toString().padStart(2, "0");
            let mm = data.getMinutes().toString().padStart(2, "0");
            let SS = data.getSeconds().toString().padStart(2, "0");
            return format
                .replace("YYYY", YYYY)
                .replace("MM", MM)
                .replace("DD", DD)
                .replace("HH", HH)
                .replace("MM", mm)
                .replace("SS", SS);
        });
        let vm = new Vue({
            el: "#app",
            data: {
                id: "",
                car: "",
                searchCar: "",
                carList: [{
                    id: 1,
                    car: "劳斯莱斯",
                    time: new Date(),
                }, {
                    id: 2,
                    car: "大众",
                    time: new Date(),
                }, {
                    id: 3,
                    car: "宝马",
                    time: new Date(),
                }, ],
            },
            methods: {
                // 添加数据
                addCar() {
                    //枚举之前的id
                    let oldIdArr = [];
                    let flag = true;
                    this.carList.forEach((item, index) => {
                        oldIdArr.push(item.id);
                    });
                    //判断输入的id或者car是否为空
                    if (this.id && this.car) {
                        //枚举获取的旧的数组
                        flag = !oldIdArr.includes(+this.id);
                        if (flag) {
                            this.carList.push({
                                id: this.id,
                                car: this.car,
                                time: new Date(),
                            });
                        }
                    } else {
                        this.carList;
                    }
                    localStorage.setItem('carList', JSON.stringify(this.carList))
                },
                // 删除数据
                deleteCar(carId) {
                    this.carList.splice(carId, 1);
                },
                //搜索数据
                change() {
                    return this.carList.filter((value) => {
                        // console.log(value.car);
                        return value.car.includes(this.searchCar);
                    });
                },
            },
            created() {
                console.log(localStorage.getItem('carList'));
                if (localStorage.getItem('carList')) {
                    this.carList = JSON.parse(localStorage.getItem('carList'))
                }
                console.dir(JSON.parse(localStorage.getItem("carList"))[0].time);
                console.dir(new Date());
            },
        });
    </script>
</body>

</html>

上面是源码。
在这里插入图片描述

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

<head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css" />
    <script src="./js/vue.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
</head>

<body>
    <div id="app">
        <div class="container">
            <div class="panel panel-success">
                <div class="panel-heading">
                    <h3 class="panel-title">增删该查数据</h3>
                </div>
                <div class="panel-body">
                    <form action="" method="POST" class="form-inline" role="form">
                        <div class="form-group">
                            <label for="">id:</label>
                            <input type="number" class="form-control" id="" placeholder="Input field" v-model.value="id" />
                        </div>
                        <div class="form-group">
                            <label for="">car:</label>
                            <input type="text" class="form-control" id="" placeholder="Input field" v-model.value="car" />
                        </div>
                        <button type="button" class="btn btn-success" @click="addCar">
                添加
              </button>
                        <div class="form-group">
                            <label for="">搜索：</label>
                            <input type="text" class="form-control" id="" placeholder="Input field" v-model.value="searchCar" @change="change" />
                        </div>
                    </form>
                </div>

                <table class="table table-bordered table-hover">
                    <thead>
                        <tr>
                            <th>id</th>
                            <th>car</th>
                            <th>time</th>
                            <th>操作</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr v-for="(item,index) in change()" :key='item.id'>
                            <td>{{item.id}}</td>
                            <td>{{item.car}}</td>
                            <td>{{item.time | dataFormat('YYYY-MM-DD HH:MM:SS')}}</td>
                            <td>
                                <button type="button" class="btn btn-danger" @click="deleteCar(index)">
                    删除
                  </button>
                            </td>
                        </tr>
                    </tbody>
                </table>
            </div>
        </div>
    </div>
    <script>
        Vue.filter("dataFormat", function(data2, format) {
            // console.log(format);

            let data = new Date();


            let YYYY = data.getFullYear();
            let MM = (data.getMonth() + 1).toString().padStart(2, "0");
            let DD = data.getDate().toString().padStart(2, "0");
            let HH = data.getHours().toString().padStart(2, "0");
            let mm = data.getMinutes().toString().padStart(2, "0");
            let SS = data.getSeconds().toString().padStart(2, "0");
            return format
                .replace("YYYY", YYYY)
                .replace("MM", MM)
                .replace("DD", DD)
                .replace("HH", HH)
                .replace("MM", mm)
                .replace("SS", SS);
        });
        let vm = new Vue({
            el: "#app",
            data: {
                id: "",
                car: "",
                searchCar: "",
                carList: [{
                    id: 1,
                    car: "劳斯莱斯",
                    time: new Date(),
                }, {
                    id: 2,
                    car: "大众",
                    time: new Date(),
                }, {
                    id: 3,
                    car: "宝马",
                    time: new Date(),
                }, ],
            },
            methods: {
                // 添加数据
                addCar() {
                    //枚举之前的id
                    let oldIdArr = [];
                    let flag = true;
                    this.carList.forEach((item, index) => {
                        oldIdArr.push(+item.id);
                    });
                    //判断输入的id或者car是否为空
                    if (this.id && this.car) {
                        //枚举获取的旧的数组
                        console.log(oldIdArr);
                        console.log(this.id);
                        flag = !oldIdArr.includes(+this.id);
                        if (flag) {
                            this.carList.push({
                                id: this.id,
                                car: this.car,
                                time: new Date(),
                            });
                        } else {
                            alert('您输入的id与之前重复')
                        }
                    } else {
                        this.carList;
                    }
                    localStorage.setItem('carList', JSON.stringify(this.carList))
                },
                // 删除数据
                deleteCar(carId) {
                    this.carList.splice(carId, 1);
                    localStorage.setItem('carList', JSON.stringify(this.carList))
                },
                //搜索数据
                change() {
                    return this.carList.filter((value) => {
                        // console.log(value.car);
                        return value.car.includes(this.searchCar);
                    });
                },
            },
            created() {
                console.log(localStorage.getItem('carList'));
                if (localStorage.getItem('carList')) {
                    this.carList = JSON.parse(localStorage.getItem('carList'))
                }
                console.dir(JSON.parse(localStorage.getItem("carList"))[0].time);
                console.dir(new Date());
            },
        });
    </script>
</body>

</html>