实现效果如下：

代码实现如下：

<!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. Maven生命周期——2

    Maven牛人说-Maven生命周期 http://juvenshun.iteye.com/blog/213959 Maven的三套生命周期: Clean Lifecycle 在进行真正的构建之前进行 ...

  2. 《流畅的Python》Data Structures--第2章序列array

    第二部分 Data Structure Chapter2 An Array of Sequences Chapter3 Dictionaries and Sets Chapter4 Text vers ...

  3. Python3之使用Crypto

    pip3 install pycryptodome 快速方式:pip3 install -i https://pypi.douban.com/simple pycryptodome PyCrypto ...

  4. FTPClient上传下载等

    package com.lct.conference.controller.MonitorManagement.cofer; import org.apache.commons.net.ftp.FTP ...

  5. Vue中v-if和v-show的使用场景

    1. 官方文档 https://cn.vuejs.org/v2/guide/conditional.html#v-if-vs-v-show 2. v-if 和 v-show 的区别 2.1 官方解释 ...

  6. P3368 【模板】树状数组 2

    原题链接  https://www.luogu.org/problemnew/show/P3368 这个题和洛谷P3374树状数组1 有些不同,在普通的树状数组上运用了差分的知识.(由于P3374涉及 ...

  7. [shell]如何测试shell脚本，保证正确

    如何用最快最有效的方式进行测试? 很多开发的习惯是,二话不说,写完/拿到,就跑一把,看看输入,输出,想要的操作是否完成,也就过了. 其实这是十分不严谨的,若是未经过QA,风险还是相当大的. 以下即sh ...

  8. Fiddler 安装使用

    Fiddler是一个蛮好用的抓包工具,可以将网络传输发送与接受的数据包进行截获.重发.编辑.转存等操作.也可以用来检测网络安全.反正好处多多,举之不尽呀!当年学习的时候也蛮费劲,一些蛮实用隐藏的小功能 ...

  9. gitlab 配置.ssh实现免密登陆

    首次配置gitlab的.ssh时 安装gitbash 通过gitbash 配置.ssh 打开gitbash,输入如下命令生成ssh,邮箱换成自己的 ssh-keygen -t rsa -C " ...

  10. elasticsearch shield在java中的应用

    官方文档:https://www.elastic.co/guide/en/shield/current/_using_elasticsearch_java_clients_with_shield.ht ...