zoukankan      html  css  js  c++  java
  • vue实现简单学生信息管理案例

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>学生信息管理</title>
        <link rel="stylesheet" href="./lib/bootstrap.css">
        <script src="./lib/vue.js"></script>
        <style type="text/css">
            #app{
                margin: 10px;
            }
        </style>
    </head>
    <body>
    <div id="app">
        <form class="form-inline">
            <div class="form-group">
                <label>学号:</label>
                <input type="text" class="form-control" v-model="stuNo">
            </div>&nbsp;&nbsp;
            <div class="form-group">
                <label>姓名:</label>
                <input type="email" class="form-control" v-model="name" @keyup.enter="add">
            </div>&nbsp;
            <input type="button" class="btn btn-primary" value="添加" @click="add">
            &nbsp;&nbsp;&nbsp;&nbsp;
            <div class="form-group">
                <label>搜索姓名关键字:</label>
                <input type="email" class="form-control" v-model="keywords" @keyup.enter="search(keywords)" v-focus>
            </div>
        </form>
        <br/>
        <table class="table table-bordered" >
            <thead>
            <th>学号</th>
            <th>姓名</th>
            <th>添加时间</th>
            <th>操作</th>
            </thead>
            <tbody v-for="(item,i) in search(keywords)" :key="item.stuNo" >
            <tr>
                <td>{{item.stuNo}}</td>
                <td>{{item.name}}</td>
                <td>{{item.cTime | dateFormat}}</td>
                <td><a href="" @click.prevent="del(item.stuNo)">删除</a></td>
            </tr>
            </tbody>
        </table>
    </div>
    
    <script>
        // 自定义自动获取焦点的全局指令
        Vue.directive('focus',{
            // 当被绑定的元素插入到 DOM 中时……
            inserted: function (el) {
                // 聚焦元素
                el.focus()
            }
        })
        var vm = new Vue({
            el:'#app',
            data:{
                stuNo:'',
                name:'',
                keywords:'',
                list:[
                    {
                        stuNo:1710204016,
                        name:'刘小红',
                        cTime:new Date()
                    },
                    {
                        stuNo:1710204007,
                        name:'李大明',
                        cTime:new Date()
                    }
                ]
            },
            methods:{
                add(){
                    var newInfo = {stuNo:this.stuNo, name:this.name, cTime:new Date()}
                    this.list.push(newInfo)
                    this.stuNo=this.name=''
                },
                del(stuNo){
                    this.list.some((item,i)=>{
                        if(item.stuNo===stuNo){
                            this.list.splice(i,1)
                            return true;
                        }
                    })
                },
                search(keywords){
                    // var newList = []
                    // this.list.forEach(item=>{
                    //     if(item.name.indexOf(keywords)!=-1){
                    //         newList.push(item)
                    //     }
                    // })
                    // return newList
                   return this.list.filter(item=>{
                        if(item.name.includes(keywords)){
                            return item
                        }
                    })
                }
            },
            filters:{
                dateFormat:function(dateStr){
                    var year = dateStr.getFullYear()
                    var mouth = (dateStr.getMonth() + 1).toString().padStart(2,'0')
                    var date = (dateStr.getDate()).toString().padStart(2,'0')
                    var h = (dateStr.getHours()).toString().padStart(2,'0')
                    var m = (dateStr.getMinutes()).toString().padStart(2,'0')
                    var s = (dateStr.getSeconds()).toString().padStart(2,'0')
                    return `${year}-${mouth}-${date} ${h}:${m}:${s}`
                }
            }
        })
    </script>
    </body>
    </html>
  • 相关阅读:
    总结一下最近用过的phpcms语法
    phpcms和php格式化时间戳
    为什么使用bootstrap在一个页面同时做两个轮播效果时,只有第一个有效??
    Jquery右击显示菜单事件,运用smartMenu插件。
    流程管理
    权限管理
    文件管理的练习(目录文件的打开,双击返回上一层目录、双击打开子目录文件)
    php部分--文件操作
    php部分--头像上传预览
    PHP部分--图片上传服务器、图片路径存入数据库,并读取
  • 原文地址:https://www.cnblogs.com/zhahuhu/p/11618599.html
Copyright © 2011-2022 走看看