实现效果如下：

代码实现如下：

<!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 ;

            }

            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: , sex: '男', phone: ''},

                    {name: '李四', age: , sex: '男', phone: ''},

                    {name: '王五', age: , sex: '女', phone: ''},

                    {name: '赵六', age: , sex: '男', phone: ''},

                ],

                newStudent: {name: '', age: , sex: '男', phone: ''},

            },

            methods: {

                // 创建一条新纪录

                createStudent() {

                    // alert(0);

                    // 容错提示处理

                    if(this.newStudent.name === '') {

                        alert('姓名不能为空');

                        return;

                    }

                    if(this.newStudent.age <= ) {

                        alert('请填写正确的年龄');

                        return;

                    }

                    if(this.newStudent.phone === '') {

                        alert('手机号码不能为空');

                        return;

                    }

                    // 插入数据到数组的最前面

                    this.persons.unshift(this.newStudent);

                    // 清空数据

                    this.newStudent = {name: '', age: , sex: '男', phone: ''};

                },

                // 删除记录

                deleteStudent(index) {

                    this.persons.splice(index, );

                }

            }

        });

    </script>

</body>

</html>

Vue 2.x指令综合小练习的更多相关文章

  1. vue 所有的指令

    1. v-text v-text主要用来更新textContent,可以等同于JS的text属性. <span v-text="msg"></span> 这 ...

  2. Vue.js 和 MVVM 的小细节

    Vue.js 和 MVVM 的小细节 转载 作者:流云诸葛 链接:www.cnblogs.com/lyzg/p/6067766.html MVVM 是Model-View-ViewModel 的缩写, ...

  3. 02: vue.js常用指令

    目录:Vue其他篇 01: vue.js安装 02: vue.js常用指令 目录: 1.1 vuejs简介 1.2 选择器:根据id.class等查找 1.3 静态绑定数据 data 1.4 插值 { ...

  4. Vue.directive 自定义指令

    一.什么是全局API? 全局API并不在构造器里,而是先声明全局变量或者直接在Vue上定义一些新功能,Vue内置了一些全局API,比如我们今天要学习的指令Vue.directive.说的简单些就是,在 ...

  5. Vue - vue.js 常用指令

    Vue - vue.js 常用指令 目录: 一. vuejs模板语法之常用指令 1. 常用指令: v-html 2. 常用指令: v-text 3. 常用指令: v-for 4. 常用指令: v-if ...

  6. vue中自定义指令的使用

    原文地址 vue中除了内置的指令(v-show,v-model)还允许我们自定义指令 想要创建自定义指令,就要注册指令(以输入框获取焦点为例) 一.注册全局指令: // 注册一个全局自定义指令 `v- ...

  7. Vue2.0 【第二季】第1节 Vue.directive自定义指令

    目录 Vue2.0 [第二季]第1节 Vue.directive自定义指令 一.什么是全局API? 二. Vue.directive自定义指令 三.自定义指令中传递的三个参数 四.自定义指令的生命周期 ...

  8. 最简单的方式理解Vue的自定义指令与混合

    vue.js 自定义指令 钩子函数:bindinsertedupdatecomponentUpdatedunbind 钩子函数完整实例:html: <div id="hook-argu ...

  9. vue.js自定义指令入门

    Vue.js 允许你注册自定义指令,实质上是让你教 Vue 一些新技巧:怎样将数据的变化映射到 DOM 的行为.你可以使用Vue.directive(id, definition)的方法传入指令id和 ...

随机推荐

  1. Bert-util安装

    转载:https://blog.csdn.net/u013109501/article/details/91987180 https://blog.csdn.net/Vancl_Wang/articl ...

  2. Java数组直接选择排序、sort（）排序

    /** * 1.数组sort()排序 * 2.直接选择排序(两重for循环排序) */ import java.lang.*; import java.lang.reflect.Array; impo ...

  3. Linux 误卸载自带python后的解决办法

    1:卸载python(以免有些同学没有卸载干净) rpm -qa|grep python|xargs rpm -ev --allmatches --nodeps #强制删除已安装程序及其关联 wher ...

  4. Robot Framework--修改log和报告的生成目录

    1.修改log和报告的生成目录:-l F:\testreport\log -r F:\testreport\report -o F:\testreport\output -l:log -r:repor ...

  5. linux实操_定时任务调度

    crond任务调度 语法:crontab [选项] -e 编辑crontab定时任务 -i 查询crontab任务 -r 删除当前用户所有的crontab任务 service crond restar ...

  6. Django的ManyToManyField(多对多)中的through的作用

    创建一个经典的多对多关系:一本书可以有多个作者,一个作者可以有多本书(如下) 运行“python manage.py makemigratons"和"python manage.p ...

  7. 【JUC系列第二篇】-原子变量

    作者:毕来生 微信:878799579 1.什么是原子变量? ​ 原子变量保证了该变量的所有操作都是原子的,不会因为多线程的同时访问而导致脏数据的读取问题. 2.通过synchronized保证原子操 ...

  8. Java8-Lock-No.03

    import java.util.HashMap; import java.util.Map; import java.util.concurrent.ExecutorService; import ...

  9. [2019HDU多校第一场][HDU 6580][C. Milk]

    题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=6580 题目大意:\(n\times m\)大小的方格上有\(k\)瓶水,喝完每瓶水都需要一定的时间.初 ...

  10. python pass del eval

    pass python中空代码块是非法的,解决的方法就是在语句块中加上一个pass语句 eval >>> eval("print('hellowrold')")h ...