基于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+Element实现增删改查的示例源码
Nov 23 Vue.js
vue从后台渲染文章列表以及根据id跳转文章详情详解
Dec 14 Vue.js
vue实现树状表格效果
Dec 29 Vue.js
Vue实现一种简单的无限循环滚动动画的示例
Jan 10 Vue.js
Vue 集成 PDF.js 实现 PDF 预览和添加水印的步骤
Jan 22 Vue.js
如何在 Vue 表单中处理图片
Jan 26 Vue.js
vue实现同时设置多个倒计时
May 20 Vue.js
详解vue身份认证管理和租户管理
May 25 Vue.js
Vue+TypeScript中处理computed方式
Apr 02 Vue.js
解决vue中provide inject的响应式监听
Apr 19 Vue.js
使用vuex-persistedstate本地存储vuex
Apr 29 Vue.js
vue项目如何打包之项目打包优化(让打包的js文件变小)
Apr 30 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
php递归调用删除数组空值元素的方法
2015/04/28 PHP
php实现网页缓存的工具类分享
2015/07/14 PHP
WordPress中查询文章的循环Loop结构及用法分析
2015/12/17 PHP
两个DIV等高的JS的实现代码
2007/12/23 Javascript
js可突破windows弹退效果代码
2008/08/09 Javascript
在JavaScript中typeof的用途介绍
2013/04/11 Javascript
jquery中交替点击事件toggle方法的使用示例
2013/12/08 Javascript
node.js中的fs.appendFileSync方法使用说明
2014/12/17 Javascript
jQuery禁用键盘后退屏蔽F5刷新及禁用右键单击
2016/01/22 Javascript
JS实现CheckBox复选框全选、不选或全不选功能
2020/07/28 Javascript
Angularjs 实现分页功能及示例代码
2016/09/14 Javascript
echarts统计x轴区间的数值实例代码详解
2019/07/07 Javascript
vue移动端实现手机左右滑动入场动画
2020/06/17 Javascript
原生js实现随机点名功能
2019/11/05 Javascript
[06:16]DOTA2守卫传承者——职业选手谈心路历程
2015/02/26 DOTA
Python实现类继承实例
2014/07/04 Python
Python学习笔记之os模块使用总结
2014/11/03 Python
Python压缩解压缩zip文件及破解zip文件密码的方法
2015/11/04 Python
使用Python生成随机密码的示例分享
2016/02/18 Python
python使用matplotlib绘制柱状图教程
2017/02/08 Python
Python获取当前页面内所有链接的四种方法对比分析
2017/08/19 Python
对python中for、if、while的区别与比较方法
2018/06/25 Python
Django中的Model操作表的实现
2018/07/24 Python
tensorflow saver 保存和恢复指定 tensor的实例讲解
2018/07/26 Python
python db类用法说明
2020/07/07 Python
CSS3伪类选择器:nth-child()
2009/04/02 HTML / CSS
经济实惠的名牌太阳镜和眼镜:Privé Revaux
2021/02/07 全球购物
会计学财务管理专业个人的自我评价
2013/10/19 职场文书
日语系毕业生推荐信
2013/11/11 职场文书
大学校运会广播稿
2014/02/03 职场文书
大一学生职业生涯规划
2014/03/11 职场文书
2014医学院领导干部四风对照检查材料思想汇报
2014/09/16 职场文书
2014年置业顾问工作总结
2014/11/17 职场文书
拾金不昧表扬稿
2015/01/16 职场文书
教师学习中国梦心得体会
2016/01/05 职场文书
解决SpringBoot文件上传临时目录找不到的问题
2021/07/01 Java/Android