vue实现学生信息管理系统
本文实例为大家分享了vue实现学生信息管理系统的具体代码，供大家参考，具体内容如下
界面
代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>vue--学生信息管理系统</title>
<!-- 引包 -->
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<style>
.title{margin:20px;font-weight: bold;font-size: 20px;}
</style>
</head>
<body>
<div id="app">
<!-- 通过：style设置样式 -->
<table :style="[render_table]">
<!-- 通过：class设置样式 -->
<caption :class="['title']">学生信息管理系统</caption>
<tr>
<td>学号</td>
<td>姓名</td>
<td>年龄</td>
<td>操作</td>
</tr>
<!-- 遍历数据 -->
<tr v-for="(stu,i) in list">
<td><input type="text" v-model="stu.no"></td>
<td><input type="text" v-model="stu.name"></td>
<td><input type="text" v-model="stu.age"></td>
<!-- 绑定点击事件并传参 -->
<td><input type="button" value="删除" @click="del(i)"></td>
</tr>
</table>
<!-- 添加数据的表单 -->
<div :style="[render_form]">
<input type="search" v-model="no" placeholder="学号"><br>
<input type="search" v-model="name" placeholder="姓名"><br>
<input type="search" v-model="age" placeholder="年龄"><br>
<input type="button" value="添加" @click="add">
</div>
<!-- 用来显示双向数据绑定后的编辑效果,数据驱动视图 -->
<div>
<h2>全部数据</h2>
<ul v-for="(stu,i) in list">
<!--用三种方式获取数据 -->
<li>{{stu.no}}</li>
<li v-text="stu.name"></li>
<li v-html="stu.age"></li>
</ul>
</div>
</div>
<script>
//创建一个Vue的实例
var vm = new Vue({
el: "#app", //获取根节点
data: {
no:"",
name:"",
age:"",
list:[
{
no:"001",
name:"TOM",
age:18,
},{
no:"002",
name:"Juy",
age:19,
},
{ no:"003",
name:"Mlo",
age:20,
}
],
//设置样式
render_table:{"width":"700px","text-align":"center"},
render_form:{"width":"300px","text-align":"center","margin-top":"50px"}
},
methods:{
// 添加方法
add(){
this.list.push({no:this.no,name:this.name,age:this.age});
this.no="";this.name="";this.age="";
},
//删除方法
del(i){
if(confirm("确定删除吗？")){
this.list.splice(i,1);
}
}
}
})
</script>
</body>
</html>
知识点
- 双向数据绑定
- 文本插值
- 事件绑定
- 方法定义
- 数据遍历
- 样式设置
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。
相关推荐
-
vue实现简单学生信息管理
本文实例为大家分享了vue实现学生信息管理的具体代码,供大家参考,具体内容如下 代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>学生信息管理</title> <link rel="stylesheet" href="./lib/bootstrap.css&quo
-
vue实现学生信息管理系统
本文实例为大家分享了vue实现学生信息管理系统的具体代码,供大家参考,具体内容如下 界面 代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>vue--学生信息管理系统</title> <!-- 引包 --> <script src="https://cdn.jsdelivr
-
基于VUE实现简单的学生信息管理系统
一.主要功能 本次任务主要是使用VUE来实现一个简单的学生信息管理系统,主要功能为: 1.显示所有学生的信息(默认为10个) 2. 点击按钮,显示出学号尾号为单数(或双数)的学生信息 3. 增加学生信息 4. 要求使用VUE中 父子组件间通信 二.实现思路 1.数据管理:使用json数组的方式来管理储存数据 2.显示学生信息:因为组件是可复用的 Vue 实例,所以在这里引入子组件(用来显示每个学生的信息),将主页作为父组件.主页(父组件)使用v-for循环显示子组件. 3.按单双号筛选查找学生:
-
Java实现学生信息管理系统(借助Array List)
本文实例为大家分享了vue + element ui实现锚点定位的具体代码,供大家参考,具体内容如下 需求: 制作一个简单的学生信息管理系统 1.通过键盘选择操作进行添加学生(学号,姓名,性别,年龄,成绩)的信息,这些信息通过数组存储. 2.同时还可以进行: (1)查询某个或全体学生信息: (2)修改学生信息: (3)删除学生信息的操作. 要求:有一定的优化,例如对用户输入信息是否符合要求的处理. 1.首先对学生的 学号,姓名,性别,年龄,成绩这五个信息进行定义,为了不让所有人都能访问到,所
-
JSP学生信息管理系统
本文实例为大家分享了JSP学生信息管理系统源码,JSP+Servlet+Javabean+JDBC+MySQL,供大家参考,具体内容如下 1.service层,进行数据库操作 package com.service; /** * 负责学生信息的所有数据库操作,增删改查 */ import java.sql.Connection; import java.sql.PreparedStatement; import java.sql.ResultSet; import java.sql.SQ
-
C++学生信息管理系统
本文实例为大家分享了C++学生信息管理系统源码,供大家参考,具体内容如下 1. tea_list.c #include<stdio.h> #include<stdlib.h> #include<string.h> #include"teacher.h" int sq_tea ; PTEA head = NULL ; FILE *fp ; int tea_llopen(const char* path)//打开文件 { fp=fopen(path,&q
-
Winform学生信息管理系统登陆窗体设计（1）
对这块的知识学习早已期待已久,感觉学习的进度还是慢了,最近一直在学习Winform,不得不说一些登陆窗体的设计,这几天算是小有收获,自己也看了许多这方面的知识,知道了要想做学生信息管理系统是一个漫长的过程,但是从今天起就来慢慢地进行学生信息管理系统的构建,此外还用到数据库的知识,打算着自己开始学数据库的知识,今天就来看看学生信息管理系统登录窗口的设计.下面图片的是样例: 这方面的知识还是基于C#语言和.NET Framework平台的.自己所用的还是熟悉的开发环境VS2012,感觉VS2013和
-
Winform学生信息管理系统主页面设计（2）
在上次的学生登录窗口的设计(Winform学生信息管理系统登陆窗体设计(1))中,需要修改的地方为: 1.登录窗口的最大化和最小化,这个一般的登录窗口不需要,因此我们也不做,单击学生信息管理系统的窗体设计找到属性MaximizeBox和属性(窗口的最大化)和MinimizBox(窗口的最小化)是True,把它们改为False. 2.登录窗口设计的属性AcceptButton将其改为确定按钮的唯一名字(也就是button1),因此在按下回车键后我们也能登录到学生信息管理系统主页面. 3.在登录名称
-
Winform学生信息管理系统各子窗体剖析（3）
先来补充一下学生信息管理系统登录窗体,在完成的过程中总是遇到各种各样的问题,对于登录窗体的设计还是存在着一些弊端,那就是需要登录学生信息管理系统时如果输入的数据出错不必一个个删除,就需要在窗体上再添加一个清空写入数据的button控件,将其属性Text改为重置.还有一个与登录窗口设计的属性AcceptButton将其改为确定按钮的唯一名字(也就是button1),因此在按下回车键后我们也能登录到学生信息管理系统主页面相对应的CancelButton将其改为取消按钮的唯一名字(也就是button2
-
java（swing）+ mysql实现学生信息管理系统源码
本文实例为大家分享了java实现学生信息管理系统源码,供大家参考,具体内容如下 import java.awt.BorderLayout; import java.awt.Color; import java.awt.Font; import java.awt.GridLayout; import java.awt.event.ActionEvent; import java.awt.event.ActionListener; import java.sql.Connection; import
-
Java+MySQL实现学生信息管理系统源码
基于Java swing+MySQL实现学生信息管理系统:主要实现JDBC对学生信息进行增删改查,应付一般课设足矣,分享给大家.(由于篇幅原因,代码未全部列出,如有需要留下邮箱) 鉴于太多同学要源码,实在发不过来,上传到github上 https://github.com/ZhuangM/student.git 1. 开发环境:jdk7+MySQL5+win7 代码结构:model-dao-view 2. 数据库设计--建库建表语句: CREATE DATABASE student; DROP