Vue 2.x指令综合小练习

实现效果如下：

代码实现如下：

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Vue的常用指令综合小练习</title>
        <style>
            #app {
                margin: 50px auto;
                width: 600px;
            }
            fieldset {
                border: 1px solid orange;
                margin-bottom: 20px
            }
            filter input {
                width: 200px;
                height: 30px;
                margin: 10px 0;
            }
            table {
                width: 600px;
                border: 2px solid orange;
                text-align: center
            }
        </style>
    </head>
<body>
    <div id="app">
       <!-- 第一部分 -->
       <fieldset>
           <legend>学生录入系统</legend>
           <div>
               <span>姓名</span>
               <input type="text" placeholder="请输入姓名" v-model="newStudent.name">
           </div>
           <div>
                <span>年龄</span>
                <input type="text" placeholder="请输入年龄" v-model="newStudent.age">
            </div>
            <div>
                <span>性别</span>
                <select v-model="newStudent.sex">
                    <option value="男">男</option>
                    <option value="女">女</option>
                </select>
            </div>
            <div>
                <span>手机号码</span>
                <input type="text" placeholder="请输入手机号码" v-model="newStudent.phone">
            </div>
            <button @click="createStudent()">创建新用户</button>
       </fieldset>

       <!-- 第二部分 -->
       <table>
           <thead>
               <tr>
                   <td>姓名</td>
                   <td>年龄</td>
                   <td>性别</td>
                   <td>手机</td>
                   <td>删除</td>
               </tr>
           </thead>
           <tbody>
               <tr v-for="p in persons">
                   <td>{{p.name}}</td>
                   <td>{{p.age}}</td>
                   <td>{{p.sex}}</td>
                   <td>{{p.phone}}</td>
                   <td><button @click="deleteStudent()">删除</button></td>
               </tr>
           </tbody>
       </table>
    </div>
    <script src="js/vue.js"></script>
    <script>
        // 创建vue的实例
        let vm = new Vue({
            el: '#app',
            data: {
                persons: [
                    {name: '张三', age: 20, sex: '男', phone: '15399997665'},
                    {name: '李四', age: 21, sex: '男', phone: '15399997666'},
                    {name: '王五', age: 22, sex: '女', phone: '15399997667'},
                    {name: '赵六', age: 23, sex: '男', phone: '15399997668'},
                ],
                newStudent: {name: '', age: 0, sex: '男', phone: ''},
            },
            methods: {
                // 创建一条新纪录
                createStudent() {
                    // alert(0);

                    // 容错提示处理
                    if(this.newStudent.name === '') {
                        alert('姓名不能为空');
                        return;
                    }
                    if(this.newStudent.age <= 0) {
                        alert('请填写正确的年龄');
                        return;
                    }
                    if(this.newStudent.phone === '') {
                        alert('手机号码不能为空');
                        return;
                    }

                    // 插入数据到数组的最前面
                    this.persons.unshift(this.newStudent);
                    
                    // 清空数据
                    this.newStudent = {name: '', age: 0, sex: '男', phone: ''};
                },
                // 删除记录
                deleteStudent(index) {
                    this.persons.splice(index, 1);
                }
            }
        });
    </script>
</body>
</html>

 

posted on 2017-11-04 17:49  玉思盈蝶  阅读(278)  评论(0)  编辑  收藏  举报

导航