实现效果如下：

代码实现如下：

<!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. jade-包含

    模板继承是子文件,父文件继承和代码复用的问题,那模版包含是文件与文件之间,文件与区块之间,这种区块内嵌的东西 继承的关键字是extends, 那模板包含使用的是include这个关键字 head.ja ...

  2. 线程的 run()和 start()有什么区别？（未完成）

    线程的 run()和 start()有什么区别?(未完成)

  3. nagios安装部署及详细配置说明(转)

    一.Nagios简介 Nagios是一款开源的电脑系统和网络监视工具,能有效监控Windows.Linux和Unix的主机状态,交换机路由器等网络设置,打印机等.在系统或服务状态异常时发出邮件或短信报 ...

  4. ndk学习之c++语言基础复习----面向对象编程

    关于面向对象编程对于一个java程序员那是再熟悉不过了,不过对于C++而言相对java还是有很多不同点的,所以全面复习一下. 类 C++ 在 C 语言的基础上增加了面向对象编程,C++ 支持面向对象程 ...

  5. jquery动态背景切换全屏登录插件supersized.js

    下载地址:https://download.csdn.net/download/t101lian/10434198预览: http://www.daimabiji.com/codedemo/1530 ...

  6. spring lookup method 注入

           lookup method注入是spring动态改变bean里方法的实现.方法执行返回的对象,使用spring内原有的这类对象替换,通过改变方法返回值来动态改变方法.内部实现为使用cgl ...

  7. mysql group_concat长度限制

    group_concat函数有长度限制 查找当前数据库长度 show variables like 'group_concat_max_len' 设置当前session的group_concat长度, ...

  8. Android Studio 3.5.2添加依赖库

    因为要连接服务器的数据库,百度了一下经验,需要添加一些mysql库,看了一下经验,没有找到3.5.2版本的添加依赖库的教程. 因为新版本的androidstudio有一些不同,作以记录. 比如我们要添 ...

  9. CF70E Information Reform

    题意:给你一棵树,要选择若干节点,若一个点i没有选择,则有\(d(dis(i,j))\)的代价,其中j被选择.选择一个点代价为k,求最小代价. 首先,考虑这样一个问题: 如果距离a的最近被选点为i,距 ...

  10. linux重启之后No CUDA-supporting devices found!

    实验室做并行计算的服务重启后,采用cuda接口的应用程序vasp_gpu,运行时提示: CUDA Error in cuda_main.cu, line 144: unknown error No C ...