实现效果如下：

代码实现如下：

<!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. 2018年长沙理工大学第十三届程序设计竞赛 I 连续区间的最大公约数

    连续区间的最大公约数 思路:参照BZOJ 4488: [Jsoi2015]最大公约数脑补出的一个\(map\)套\(vector\)的写法,写起来比线段树短,运行时间比线段树快. 代码: #pragm ...

  2. python3 多线程和多进程

    一.线程和进程 1.操作系统中,线程是CPU调度和分派的基本单位,线程依存于程序中 2.操作系统中,进程是系统进行资源分配和调度的一个基本单位,一个程序至少有一个进程 3.一个进程由至少一个线程组成, ...

  3. java中的io流总结（二）——RandomAccessFile类

    知识点:RandomAccessFile (随机访问文件)类 (一)描述 前一篇博客中https://www.cnblogs.com/shuaifing/p/11490160.html,主要描述Fil ...

  4. Pytest【定制fixture】

    在pytest中的fixture是在测试函数运行前后,由pytest执行的外壳函数,fixture中的代码可以定制,满足多变的测试需求:包括定义传入测试中的数据集.配置测试前系统的初始化状态.为批量测 ...

  5. @@identity， scope_identity ident_current 的区别

  6. Java 基础 - Collection集合通用方法及操作/ArrayList和LinkedList的差别优势 /弃用的Vector

    Collection的笔记: /**存储对象考虑使用: * 1.数组, ①一旦创建,其长度不可变!② 长度难于应对实际情况 * 2.Java集合, ①Collection集合: 1.set: 元素无序 ...

  7. Angular4的dom事件

    Angular4的dom事件 差值表达式和属性绑定其实是一样的(例) <!-- 这两个是一样的效果,使用哪个都可以 --> <img src="{{imgUrl}}&quo ...

  8. 优化编辑器的编程语言 mlton

    MLton 是整个程序的优化编译器的标准ML编程语言.

  9. [Luogu] 八数码难题

    https://www.luogu.org/problemnew/show/P1379 long long ago 暴力bfs #include <iostream> #include & ...

  10. OI 常用模板 手写

    线性筛素数 (例题 洛谷P3383) bool p[50000010]; int cnt = 0; int prime[10000010]; inline void init() { int N = ...