基于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开发chrome插件,实现获取界面数据和保存到数据库功能
Dec 01 Vue.js
vue 使用class创建和清除水印的示例代码
Dec 25 Vue.js
vue 使用 sortable 实现 el-table 拖拽排序功能
Dec 26 Vue.js
Vue实现简易购物车页面
Dec 30 Vue.js
vue前端工程的搭建
Mar 31 Vue.js
Vue + iView实现Excel上传功能的完整代码
Jun 22 Vue.js
Vue.js中v-for指令的用法介绍
Mar 13 Vue.js
vue中this.$http.post()跨域和请求参数丢失的解决
Apr 08 Vue.js
vue 给数组添加新对象并赋值
Apr 20 Vue.js
vue生命周期钩子函数以及触发时机
Apr 26 Vue.js
关于vue-router-link选择样式设置
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
thinkphp中连接oracle时封装方法无法用的解决办法
2013/06/17 PHP
php中ob_flush函数和flush函数用法分析
2015/03/18 PHP
php把数组值转换成键的方法
2015/07/13 PHP
PHP数组对象与Json转换操作实例分析
2019/10/22 PHP
鼠标移动到一张图片时变为另一张图片
2006/12/05 Javascript
一个简单的javascript类定义例子
2009/09/12 Javascript
锋利的jQuery 要点归纳(三) jQuery中的事件和动画(上:事件篇)
2010/03/24 Javascript
jquery的相对父元素和相对文档定位示例代码
2013/08/02 Javascript
javascript页面倒计时实例
2015/07/25 Javascript
纯javascript代码实现计算器功能(三种方法)
2015/09/07 Javascript
JS实现带鼠标效果的头像及文章列表代码
2015/09/27 Javascript
AngularJS在IE下取数据总是缓存问题的解决方法
2016/08/05 Javascript
浅谈js继承的实现及公有、私有、静态方法的书写
2016/10/28 Javascript
require.js与bootstrap结合实现简单的页面登录和页面跳转功能
2017/05/12 Javascript
js实现带进度条提示的多视频上传功能
2020/12/13 Javascript
Vue中的无限加载vue-infinite-loading的方法
2018/04/08 Javascript
微信小程序使用websocket通讯的demo,含前后端代码,亲测可用
2019/05/22 Javascript
跟老齐学Python之集合(set)
2014/09/24 Python
django 自定义用户user模型的三种方法
2014/11/18 Python
详解Python中where()函数的用法
2018/03/27 Python
Python基于FTP模块实现ftp文件上传操作示例
2018/04/23 Python
在Python中将函数作为另一个函数的参数传入并调用的方法
2019/01/22 Python
一文了解Python并发编程的工程实现方法
2019/05/31 Python
python去除删除数据中\u0000\u0001等unicode字符串的代码
2020/03/06 Python
python如何解析复杂sql,实现数据库和表的提取的实例剖析
2020/05/15 Python
PythonPC客户端自动化实现原理(pywinauto)
2020/05/28 Python
深入了解python列表(LIST)
2020/06/08 Python
python输入中文的实例方法
2020/09/14 Python
How to spawning asynchronous work in J2EE
2016/08/29 面试题
绘画专业自荐信范文
2014/02/23 职场文书
村委会贫困证明范本
2014/09/17 职场文书
个人工作作风整改措施思想汇报
2014/10/13 职场文书
2015年社区综治工作总结
2015/04/21 职场文书
实践论读书笔记
2015/06/29 职场文书
redis sentinel监控高可用集群实现的配置步骤
2022/04/01 Redis
Android开发手册自定义Switch开关按钮控件
2022/06/10 Java/Android