vue常用指令实现一个学生录入系统

最新推荐文章于 2023-04-27 11:11:15 发布

m0_67393039

最新推荐文章于 2023-04-27 11:11:15 发布

阅读量289

点赞数

分类专栏：前端 html 文章标签： css3 css 前端

本文链接：https://blog.csdn.net/m0_67393039/article/details/123304567

版权

该博客介绍了一个基于Vue的学生录入系统，包括输入内容判断、增删功能的实现。通过示例展示了页面从初始化到添加、删除用户的状态变化，并提供了完整的HTML页面代码，特别是相关JS代码部分。

摘要由CSDN通过智能技术生成

一、功能描述：

1，对于输入的内容进行简单的判断。

2，实现简单的增加和删除功能。

二、运行情况

图1 页面初始化情况

点击"添加新用户"如下：

图2：添加一个新用户

图3：删除Anna和张三两个用户

全部代码如下所示：（直接复制到一个.html文件即可成功运行）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>01-VUE的常用指令-综合练习</title>
    <style>
        #app {margin: 50px auto; width: 600px;}
        fieldset {border: 1px solid orangered;margin-bottom:20px;}
        fieldset input{width: 200px; height: 30px; margin: 10px 0;}
        table{width: 600px;border: 2px solid orangered; text-align: center;}
        thead{background-color: orangered;}
    </style>
</head>
<body>
    <

最低0.47元/天解锁文章

m0_67393039

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
vue常用指令实现一个学生录入系统

一、功能描述：1，对于输入的内容进行简单的判断。2，实现简单的增加和删除功能。二、运行情况图1 页面初始化情况点击"添加新用户"如下：图2：添加一个新用户图3：删除Anna和张三两个用户全部代码如下所示：（直接复制到一个.html文件即可成功运行）<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-
复制链接

扫一扫

专栏目录