Vue 复习考试练习

最新推荐文章于 2024-07-02 17:21:46 发布

java庞

最新推荐文章于 2024-07-02 17:21:46 发布

阅读量810

点赞数 1

文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/weixin_44899752/article/details/125499622

版权

一，先做一个登录页面login.html，效果如下图
1，当用户名或密码为空时，单击登录提示
在这里插入图片描述
2，当用户名是admin密码是123是跳转到主页面index.html页面

3，完成添加功能
当姓名为空时，点击添加提示如下图

2，当性别为空时提示

3，当年龄为空时提示

4，完成搜索功能

完成，删除功能

login.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">
    <link href="../css/antd.min.css" rel="stylesheet">
    <script src="../js/vue.min.js"></script>
    <script src="../js/antd.min.js"></script>
    <title>Document</title>
</head>
<body>
    <div id="app">
        <div  style="width: 260px; align-content: center;">
            <h1>登录框</h1>
            <p>
                用户名:<a-input v-model="username" placeholder="请输入用户名....."></a-input>
            </p>
            <p>
                密码:<a-input type="password" v-model="userpwd" placeholder="请输入密码....."></a-input>
            </p>
            <p>
                <a-button type="primary" @click="login()" block>登 录</a-button>
                
            </p>
        </div>
    </div>
</body>
<script>
    new Vue({
        el:"#app",
        data:{
            username:"",
            userpwd:""
        },
        methods:{
            login:function(){
                //获取用户名和密码
                var name = this.username;
                var pwd = this.userpwd;
                if(name=="admin"&&pwd==123){
                    window.location.href="index.html"
                }else{
                    this.$message.error("登录失败，用户名或密码不正确")
                }
            }
        }
    })
</script>
</html>

index.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">
    <link href="../css/antd.min.css" rel="stylesheet">
    <script src="../js/vue.min.js"></script>
    <script src="../js/antd.min.js"></script>
    <title>Document</title>
</head>
<body>
    <div id="app">
        <div style="width: 550px;">
            <fieldset>
                <legend>添加学生</legend>
                <p>
                    <label for="newStudentName">姓名</label>
                    <a-input v-model="newstudent.name" id="newStudentName"></a-input>
                </p>
                <p>
                   性别
                    <a-radio-group v-model="newstudent.sex" name="radioGroup">
                        <a-radio value="男">男</a-radio>
                        <a-radio value="女">女</a-radio>
                    </a-radio-group>
                </p>
                <p>
                    <label for="newStudentAge">年龄</label>
                    <a-input v-model="newstudent.age" id="newStudentAge"></a-input>
                </p>
                <p>
                    <a-button type="primary"  @click="addStudent()" block>添加</a-button>
                    
                </p>
                
            </fieldset>
        </div>
        <div style="width: 550px;">
            姓名:<a-input placeholder="请输入姓名" v-model="key_name"></a-input>
            <table border="1" style="width: 550px;">
                <tr>
                    <td>编号</td>
                    <td>姓名</td>
                    <td>性别</td>
                    <td>年龄</td>
                    <td>操作</td>
                </tr>
                <tr v-for="(student,index) in findStudent" :key="index">
                    <td>{{index+1}}</td>
                    <td>{{student.name}}</td>
                    <td>{{student.sex}}</td>
                    <td>{{student.age}}</td>
                    <td>
                        <input type="button" value="删除" @click="deleted(index)">
                    </td>
                </tr>
            </table>
        </div>
    </div>
</body>
<script>
    new Vue({

        el:"#app",
        data:{
            newstudent:{
                name:"",
                sex:"",
                age:""
            },
            students:[
                {name:"张三",sex:'男',age:20},
                {name:"小黑",sex:'男',age:20},
                {name:"小陈",sex:'女',age:21},
                {name:"小白",sex:'女',age:21},
                {name:"小张",sex:'男',age:20},
                {name:"小李",sex:'男',age:22},
            ],
            key_name:""
        },
        methods:{
            //删除
            deleted:function(index){
                if(confirm('确定要删除吗?')){
                    this.students.splice(index,1);
                }
                
            },
            //添加
            addStudent:function(){
                if(this.newstudent.name==0){
                    this.$message.info("姓名不能为空！");
                    return
                }
                if(this.newstudent.sex==0){
                    this.$message.info("请选择性别！");
                    return
                }
                if(this.newstudent.age==0){
                    this.$message.info("年龄不能为空！");
                    return
                }
                this.students.push(this.newstudent);
                this.newstudent={//清除输入框内容
                    name:"",
                    sex:"",
                    age:""
                }
            }
        },
        computed:{
            findStudent:function(){
                var _this = this;
                 return _this.students.filter(function(val){
                    return  val.name.indexOf(_this.key_name) != -1
                })
            }
        }
    });
</script>
</html>