基于VUE实现简单的学生信息管理系统


Posted in Vue.js onJanuary 13, 2021

 一、主要功能

本次任务主要是使用VUE来实现一个简单的学生信息管理系统,主要功能为:

1.显示所有学生的信息(默认为10个)
2. 点击按钮,显示出学号尾号为单数(或双数)的学生信息
3. 增加学生信息
4. 要求使用VUE中 父子组件间通信

二、实现思路

1.数据管理:使用json数组的方式来管理储存数据
2.显示学生信息:因为组件是可复用的 Vue 实例,所以在这里引入子组件(用来显示每个学生的信息),将主页作为父组件。主页(父组件)使用v-for循环显示子组件。
3.按单双号筛选查找学生:循环遍历json数组,进行判断,把符合条件的信息放到新的json数组。
4.使用 v-if 把符合筛选条件的学生信息显示在主页上。

三、代码实现

1、父子组件定义

父组件 :首先要定义要调用的组件

export default {
 name: 'HelloWorld',
 components: {
 ChildCom//调用组件
 },

子组件:

export default {
 name: 'Child',
 props: [
 'card_item'
 ],
 data () {
 return {
 }
 }
}

2、组件中的通信

组件是通过Prop向子组件传递数据的

父组件:使用v-for 遍历学生信息数组
通过:card_item(子组件定义的接受数据的名字) = “stu”(父组件传给子组件的数据)

<div v-if="flag_danshu==1">
<Child-com id="1" class="list" v-for="(stu,index1) in new_list_danshu" :key="index1" :card_item="stu" >
</Child-com>
</div>
 <div v-else-if="flag_shuangshu==1">
<Child-com id="2" class="list" v-for="(stu,index2) in new_list_shuangshu" :key="index2" :card_item="stu" >
</Child-com>
</div>
 <div v-else-if="flag_all==1">
<Child-com id="3" class="list" v-for="(stu,index3) in stu_list" :key="index3" :card_item="stu">
</Child-com>
</div>

子组件:

<div>姓名:{{ card_item.name }} </div>
  <div>学号:{{card_item.stuId}}</div>
  <div v-if="card_item.gender==1">性别:男</div>
  <div v-else>性别:女</div>

3、显示出学号尾号为单数(或双数)的学生信息(以单数为例)

danshu (stu_list) {
  this.new_list_danshu=[];
  stu_list.forEach((item) => {
   if(item.stuId%2!=0)
   this.new_list_danshu.push(item);//符合条件则加进用来存储单数信息的json数组
   }
  )
  // alert(this.new_list[1]);
  this.flag_all=0; //显示全部
  this.flag_danshu=1;//显示单数
  this.flag_shuangshu=0;//显示双数
  
 },

4、增加学生信息

add:function(){
 var name = document.getElementById("stu_name").value;
 var id = document.getElementById("stu_id").value;
 var gender = document.getElementById("stu_gender").value;
 if(name==''||id==''||gender==''){
  alert('请完善信息');
  }
  else{
  var item ={};
  item.stuId=id;
  item.name=name;
  item.gender=gender;
  this.stu_list.push(item);
  alert('添加成功');
  
  }
 }

四、效果展示

主页

基于VUE实现简单的学生信息管理系统

显示学号尾号为单数的学生信息

基于VUE实现简单的学生信息管理系统

增加学生信息

基于VUE实现简单的学生信息管理系统

五、总结

虽然只是很小的一个demo,但在完成中还是遇到了很多问题,比如要注意 v-show 和v-if的区别。一开始,本来想使用v-show来按筛选条件来显示不同的学生信息,但是发现就算不符合当前条件的学生信息还是被渲染并且显示出来了,通过寻求帮助,才发现如果我们要显示多个页面,并且这些页面是互斥的关系话,我们使用v-if ,v-else-if,v-else 来显示。

以下是v-show 和 v-if 的区别

v-if只有在判断为true的时候才会对数据进行渲染,false的时候把包含的代码进行删除。除非再次进行数据渲染,v-if才会重新判断。可以说是用法比较倾向于对数据一次操作。
v-show是无论判断是什么都会先对数据进行渲染,只是false的时候对节点进行display:none;的操作。所以再不重新渲染数据的情况下,改变数据的值可以使数据展示或隐藏。

到此这篇关于基于VUE实现简单的学生信息管理系统的文章就介绍到这了,更多相关vue学生信息管理系统内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木!

到此这篇关于基于VUE实现简单的学生信息管理系统的文章就介绍到这了,更多相关vue学生信息管理系统内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木!

Vue.js 相关文章推荐
vue 表单输入框不支持focus及blur事件的解决方案
Nov 17 Vue.js
vuex Module将 store 分割成模块的操作
Dec 07 Vue.js
vue 基于abstract 路由模式 实现页面内嵌的示例代码
Dec 14 Vue.js
vue中如何添加百度统计代码
Dec 19 Vue.js
Vue实现省市区三级联动
Dec 27 Vue.js
Vue 集成 PDF.js 实现 PDF 预览和添加水印的步骤
Jan 22 Vue.js
vue浏览器返回监听的具体步骤
Feb 03 Vue.js
Vue详细的入门笔记
May 10 Vue.js
简单聊聊Vue中的计算属性和属性侦听
Oct 05 Vue.js
前端vue+express实现文件的上传下载示例
Feb 18 Vue.js
vue实现Toast组件轻提示
Apr 10 Vue.js
Vue3实现简易音乐播放器组件
Aug 14 Vue.js
详解为什么Vue中的v-if和v-for不建议一起用
Jan 13 #Vue.js
vue自定义组件实现双向绑定
Jan 13 #Vue.js
Vue页面渲染中key的应用实例教程
Jan 12 #Vue.js
Vue项目中使用mock.js的完整步骤
Jan 12 #Vue.js
vue 页面跳转的实现方式
Jan 12 #Vue.js
Vue过滤器,生命周期函数和vue-resource简单介绍
Jan 12 #Vue.js
详解template标签用法(含vue中的用法总结)
Jan 12 #Vue.js
You might like
Zend的Registry机制的使用说明
2013/05/02 PHP
PHP判断表单复选框选中状态完整例子
2014/06/24 PHP
在openSUSE42.1下编译安装PHP7 的方法
2015/12/24 PHP
laravel 5.1下php artisan migrate的使用注意事项总结
2017/06/07 PHP
php闭包中使用use声明变量的作用域实例分析
2018/08/09 PHP
YII框架实现自定义第三方扩展操作示例
2019/04/26 PHP
aspx中利用js实现确认删除代码
2010/07/22 Javascript
入门基础学习 ExtJS笔记(一)
2010/11/11 Javascript
JQuery实现鼠标滑过显示导航下拉列表
2013/09/12 Javascript
jQuery 追加元素的方法如append、prepend、before
2014/01/16 Javascript
使用JavaScript+canvas实现图片裁剪
2015/01/30 Javascript
TypeScript 学习笔记之基本类型
2015/06/19 Javascript
jQuery事件的绑定、触发、及监听方法简单说明
2016/05/10 Javascript
js动态添加的DIV中的onclick事件简单实例
2016/07/25 Javascript
模拟javascript中的sort排序(简单实例)
2016/08/17 Javascript
jQuery实现的页面遮罩层功能示例【测试可用】
2017/10/14 jQuery
Nodejs下使用gm圆形裁剪并合成图片的示例
2018/02/22 NodeJs
Vue表单输入绑定的示例代码
2018/11/01 Javascript
微信小程序实现随机验证码功能
2018/12/20 Javascript
koa2的中间件功能及应用示例
2020/03/05 Javascript
[50:50]完美世界DOTA2联赛PWL S3 Galaxy Racer vs Phoenix 第一场 12.10
2020/12/13 DOTA
python编写暴力破解FTP密码小工具
2014/11/19 Python
Python中使用dom模块生成XML文件示例
2015/04/05 Python
python里使用正则的findall函数的实例详解
2017/10/19 Python
pyautogui自动化控制鼠标和键盘操作的步骤
2020/04/01 Python
如何快速理解python的垃圾回收机制
2020/09/01 Python
如何使用Django Admin管理后台导入CSV
2020/11/06 Python
Chicco婴儿用品美国官网:汽车座椅、婴儿推车、高脚椅等
2018/11/05 全球购物
捷克多品牌在线时尚商店:ANSWEAR.cz
2020/10/03 全球购物
网络通讯中,端口有什么含义,端口的取值范围
2012/11/23 面试题
高校毕业生自我鉴定
2013/10/27 职场文书
幼儿园区域活动总结
2014/05/08 职场文书
团支部推优材料
2014/05/21 职场文书
教师职位说明书
2014/07/29 职场文书
个人政风行风自查自纠报告
2014/10/21 职场文书
2016年暑期社会实践活动总结报告
2016/04/06 职场文书