基于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 打包的静态文件不能直接运行的原因及解决办法
Nov 19 Vue.js
vue中使用echarts的示例
Jan 03 Vue.js
使用vue3重构拼图游戏的实现示例
Jan 25 Vue.js
Vue SPA 首屏优化方案
Feb 26 Vue.js
如何让vue长列表快速加载
Mar 29 Vue.js
Vue项目中如何封装axios(统一管理http请求)
May 02 Vue.js
详解Vue slot插槽
Nov 20 Vue.js
Vue3如何理解ref toRef和toRefs的区别
Feb 18 Vue.js
Vue.js中v-for指令的用法介绍
Mar 13 Vue.js
vue使用wavesurfer.js解决音频可视化播放问题
Apr 04 Vue.js
VUE递归树形实现多级列表
Jul 15 Vue.js
Vue Element plus使用方法梳理
Dec 24 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简介
2006/10/09 PHP
PHP中strlen()和mb_strlen()的区别浅析
2014/06/19 PHP
php 无限级分类,超级简单的无限级分类,支持输出树状图
2014/06/29 PHP
两千行代码的PHP学习笔记汇总
2014/10/05 PHP
PHP错误机制知识汇总
2016/03/24 PHP
HR vs CL BO3 第一场 2.13
2021/03/10 DOTA
页面中body onload 和 window.onload 冲突的问题的解决
2009/07/01 Javascript
extJs 下拉框联动实现代码
2010/04/09 Javascript
由JavaScript中call()方法引发的对面向对象继承机制call的思考
2011/09/12 Javascript
jquery多行滚动/向左或向上滚动/响应鼠标实现思路及代码
2013/01/23 Javascript
jquery 为a标签绑定click事件示例代码
2014/06/23 Javascript
css与javascript跨浏览器兼容性总结
2014/09/15 Javascript
浅谈javascript中createElement事件
2014/12/05 Javascript
javascript实现简单的分页特效
2015/08/12 Javascript
js实现左侧网页tab滑动门效果代码
2015/09/06 Javascript
jQuery弹出层后禁用底部滚动条(移动端关闭回到原位置)
2016/08/29 Javascript
jQuery插件zTree实现删除树节点的方法示例
2017/03/08 Javascript
基于VUE实现的九宫格抽奖功能
2018/09/30 Javascript
用node.js写一个jenkins发版脚本
2019/05/21 Javascript
vue2.0 获取从http接口中获取数据,组件开发,路由配置方式
2019/11/04 Javascript
[01:03:41]DOTA2-DPC中国联赛 正赛 Dynasty vs XG BO3 第三场 2月2日
2021/03/11 DOTA
python 获取et和excel的版本号
2009/04/09 Python
Python编码时应该注意的几个情况
2013/03/04 Python
python使用range函数计算一组数和的方法
2015/05/07 Python
Django的数据模型访问多对多键值的方法
2015/07/21 Python
Python+OpenCV人脸检测原理及示例详解
2020/10/19 Python
windows10下python3.5 pip3安装图文教程
2018/04/02 Python
django的模型类管理器——数据库操作的封装详解
2020/04/01 Python
CPB肌肤之钥美国官网:Clé de Peau Beauté
2017/09/05 全球购物
HTC VIVE美国官网:VR虚拟现实眼镜
2018/02/13 全球购物
aden + anais英国官网:美国婴儿贴身用品品牌
2019/09/08 全球购物
校运会口号
2014/06/18 职场文书
副检察长四风问题对照检查材料思想汇报
2014/10/07 职场文书
年终工作总结范文2014
2014/11/27 职场文书
在职证明格式样本
2015/06/15 职场文书
创业计划书之农家乐
2019/10/09 职场文书