07-利用Vue指令做一个简单的学生信息管理系统

需求:

利用Vue指令编写一个简单的学生管理系统。
要求： 能够展示学生信息, 能够对学生信息进行增删改查

效果：

代码：

<style>
        *{
            margin: 0;
            padding: 0;
        }
        #app{
            width: 800px;
            margin: 50px auto;
        }
        table{
            width: 100%;
            background: #000;
        }
        table tr{
            background: #fff;
        }
        table tr input{
            width: 100%;
            height: 42px;
            text-align: center;
        }
        form{
            width: 100%;
            height: 30px;
            display: flex;
            justify-content: space-between;
        }
        p{
            text-align: center;
            font-size: 30px;
            margin-bottom: 50px;
        }
        .operate{
            width: 100px;
            height: 100%;
            text-align: center;
        }
        .operate a{
            text-decoration: none;
        }
        .operate a:first-child{
            margin-right: 5px;
        }
    </style>

<div id="app">
    <p>学生信息管理系统</p>
    <form v-show="isShow">
        <input type="text" placeholder="请输入序号" v-model="person.id">
        <input type="text" placeholder="请输入姓名" v-model="person.name">
        <input type="text" placeholder="请输入分数" v-model="person.score">
        <input type="submit" value="增加" @click.prevent="add">
        <input type="submit" value="查询" @click.prevent="query">
    </form>
    <table>
        <tr>
            <th>序号</th>
            <th>姓名</th>
            <th>分数</th>
            <th>时间</th>
            <th>操作</th>
        </tr>
        <!--利用v-for指令动态生成学生信息-->
        <tr v-for="(person, index) in persons">
            <td><input type="text" v-model="person.id" :disabled="isDisabled"></td>
            <td><input type="text" v-model="person.name" :disabled="isDisabled"></td>
            <td><input type="text" v-model="person.score" :disabled="isDisabled"></td>
            <td><input type="text" :value="person.time | dateFormart" disabled></td>
            <td class="operate">
                <a href="#" @click.prevent="edit">编辑</a>
                <a href="#" @click.prevent="del(index)">删除</a>
                <br>
                <a href="#" @click.prevent="toggle">更多操作</a>
            </td>
        </tr>
    </table>
</div>

<script>
    // 格式化时间
    Vue.filter('dateFormart', function (value, fmstr) {
        let date = new Date(value);
        let year = date.getFullYear();
        let month = date.getMonth() + 1 + '';
        let day = date.getDate() + '';
        let hour = date.getHours() + '';
        let minute = date.getMinutes() + '';
        let second = date.getSeconds() + '';
        // 如果传入的时间格式是yyyy-MM-dd, 就只显示年-月-日
        if (fmstr && fmstr === 'yyyy-MM-dd'){
            return `${year}-${month.padStart(2, '0')}-${day.padStart(2, '0')}`;
        }
        // 否则就显示年-月-日 时:分:秒
        return `${year}-${month.padStart(2, '0')}-${day.padStart(2, '0')} ${hour.padStart(2, '0')}:${minute.padStart(2, '0')}:${second.padStart(2, '0')}`;
    });
    new Vue({
        el: '#app',
        data: {
            isDisabled: true,
            isShow: false,
            // 存放学生信息
            persons: [{
                id: '1',
                name: 'zs',
                score: '99',
                time: Date.now()
            },{
                id: '2',
                name: 'ls',
                score: '88',
                time: Date.now()
            },{
                id: '3',
                name: 'ww',
                score: '77',
                time: Date.now()
            }], 
            // 一个临时记录学生信息的对象
            person: {
                id: '',
                name: '',
                score: ''
            }
        },
        methods: {
            // 用于编辑的方法
            edit(){
                this.isDisabled = !this.isDisabled;
            },
            // 用于删除的方法
            del(index){
                this.persons.splice(index, 1);
            },
            // 用于更多操作的方法
            toggle(){
                this.isShow = !this.isShow;
            },
            // 用于增加学生的方法
            add(){
                this.person.time = Date.now();
                this.persons.push(this.person);
                this.person = {
                    id: '',
                    name: '',
                    score: ''
                }
            },
            // 用于查询信息的方法
            query(){
                let newPerson = this.persons.filter( (person) => {
                    if (this.person.score === person.score){
                        return true;
                    } else if (this.person.id === person.id){
                        return true;
                    } else if (this.person.name === person.name){
                        return true;
                    } 
                });
                this.persons = newPerson;
                this.person = {
                    id: '',
                    name: '',
                    score: ''
                }
            }
        }
    });
</script>