实现效果如下：

代码实现如下：

<!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. jquery进行each遍历时，根据条件取消某项操作

    示例代码: <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" c ...

  2. Js获取字符串的显示宽度/高度

    重点:1.在H5页面,文字大小单位为rem2.不同的font-family,文字的宽度不一样3.文字宽度同时受font-size和font-family影响 思路:在页面动态创建一个节点,设置节点的f ...

  3. VSCode 的PHP常用插件及安装

    一.在程序中打断点调试:PHP Debug 二.高级自动完成和重构支持(代码智能提示):PHP IntelliSense 配置: "php.suggest.basic": fals ...

  4. jaxb生成cdata块

    1.需要添加一个适配器: import javax.xml.bind.annotation.adapters.XmlAdapter; public class AdapterCDATA extends ...

  5. 企业级分布式 HTAP 数据库管理系统 TBase

    TBase 是腾讯数据平台团队在开源的 PostgreSQL 基础上研发的企业级分布式 HTAP 数据库管理系统: 具备高性能可扩展的分布式事务能力,支持 RC 和 RR 两种隔离级别: 通过安全.管 ...

  6. pandas实现hive的lag和lead函数 以及 first_value和last_value函数

    lag和lead VS shift 该函数的格式如下: 第一个参数为列名, 第二个参数为往上第n行(可选,默认为1), 第三个参数为默认值(当往上第n行为NULL时候,取默认值,如不指定,则为NULL ...

  7. Group by,并汇总求和

    static void Main(string[] args) { bbb(); Console.ReadKey(); } public static List<Dto> toAdd() ...

  8. 011_Linux驱动之_s3c2410_gpio_getpin

    1. 功能:获取引脚状态 2. 函数原型: unsigned int s3c2410_gpio_getpin(unsigned int pin) { void __iomem *base = S3C2 ...

  9. learning express step(四)

    learning express route function const express = require('express'); const app = express(); app.get(' ...

  10. 数据分析九：互联网征信中的信用评分模型（用户APP使用行为分析）

    用户APP使用行为数据分析: 一. 背景及数据介绍: 1. 移动互联网发展背景: 网民规模7.72亿,手机网民规模7.53亿: 2. APP使用热点: 商务交易类应用规模高速增长(网络购物,网上外卖, ...