• 售前

  • 售后

热门帖子
入门百科

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

[复制链接]
ssffgsa 显示全部楼层 发表于 2021-10-25 19:10:04 |阅读模式 打印 上一主题 下一主题
目次


  • 一、重要功能
  • 二、实现思绪
  • 三、代码实现
  • 四、结果展示
  • 五、总结

一、重要功能

本次任务重要是利用VUE来实现一个简朴的学生信息管理体系,重要功能为:
1.显示所有学生的信息(默以为10个)
2. 点击按钮,显示出学号尾号为单数(或双数)的学生信息
3. 增长学生信息
4. 要求利用VUE中 父子组件间通信

二、实现思绪

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

三、代码实现

1、父子组件定义
父组件 :起首要定义要调用的组件
  1. export default {
  2. name: 'HelloWorld',
  3. components: {
  4. ChildCom//调用组件
  5. },
复制代码
子组件:
  1. export default {
  2. name: 'Child',
  3. props: [
  4. 'card_item'
  5. ],
  6. data () {
  7. return {
  8. }
  9. }
  10. }
复制代码
2、组件中的通信
组件是通过Prop向子组件传递数据的
父组件:利用v-for 遍历学生信息数组
通过:card_item(子组件定义的担当数据的名字) = “stu”(父组件传给子组件的数据)
  1. <div v-if="flag_danshu==1">
  2. <Child-com id="1" class="list" v-for="(stu,index1) in new_list_danshu" :key="index1" :card_item="stu" >
  3. </Child-com>
  4. </div>
  5. <div v-else-if="flag_shuangshu==1">
  6. <Child-com id="2" class="list" v-for="(stu,index2) in new_list_shuangshu" :key="index2" :card_item="stu" >
  7. </Child-com>
  8. </div>
  9. <div v-else-if="flag_all==1">
  10. <Child-com id="3" class="list" v-for="(stu,index3) in stu_list" :key="index3" :card_item="stu">
  11. </Child-com>
  12. </div>
复制代码
子组件:
  1. <div>姓名:{{ card_item.name }} </div>
  2.   <div>学号:{{card_item.stuId}}</div>
  3.   <div v-if="card_item.gender==1">性别:男</div>
  4.   <div v-else>性别:女</div>
复制代码
3、显示出学号尾号为单数(或双数)的学生信息(以单数为例)
  1. danshu (stu_list) {
  2.   this.new_list_danshu=[];
  3.   stu_list.forEach((item) => {
  4.    if(item.stuId%2!=0)
  5.    this.new_list_danshu.push(item);//符合条件则加进用来存储单数信息的json数组
  6.    }
  7.   )
  8.   // alert(this.new_list[1]);
  9.   this.flag_all=0; //显示全部
  10.   this.flag_danshu=1;//显示单数
  11.   this.flag_shuangshu=0;//显示双数
  12.   
  13. },
复制代码
4、增长学生信息
  1. add:function(){
  2. var name = document.getElementById("stu_name").value;
  3. var id = document.getElementById("stu_id").value;
  4. var gender = document.getElementById("stu_gender").value;
  5. if(name==''||id==''||gender==''){
  6.   alert('请完善信息');
  7.   }
  8.   else{
  9.   var item ={};
  10.   item.stuId=id;
  11.   item.name=name;
  12.   item.gender=gender;
  13.   this.stu_list.push(item);
  14.   alert('添加成功');
  15.   
  16.   }
  17. }
复制代码
四、结果展示

主页

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

增长学生信息


五、总结

固然只是很小的一个demo,但在完成中还是碰到了很多题目,好比要留意 v-show 和v-if的区别。一开始,原来想利用v-show来按筛选条件来显示差别的学生信息,但是发现就算不符合当前条件的学生信息还是被渲染并且显示出来了,通过寻求资助,才发现如果我们要显示多个页面,并且这些页面是互斥的关系话,我们利用v-if ,v-else-if,v-else 来显示。
以下是v-show 和 v-if 的区别
  1. <strong>v-if</strong>只有在判断为true的时候才会对数据进行渲染,false的时候把包含的代码进行删除。除非再次进行数据渲染,v-if才会重新判断。可以说是用法比较倾向于对数据一次操作。
  2. <strong>v-show</strong>是无论判断是什么都会先对数据进行渲染,只是false的时候对节点进行display:none;的操作。所以再不重新渲染数据的情况下,改变数据的值可以使数据展示或隐藏。
复制代码
到此这篇关于基于VUE实现简朴的学生信息管理体系的文章就介绍到这了,更多相干vue学生信息管理体系内容请搜索草根技术分享以前的文章或继续欣赏下面的相干文章希望大家以后多多支持草根技术分享!
到此这篇关于基于VUE实现简朴的学生信息管理体系的文章就介绍到这了,更多相干vue学生信息管理体系内容请搜索草根技术分享以前的文章或继续欣赏下面的相干文章希望大家以后多多支持草根技术分享!

本帖子中包含更多资源

您需要 登录 才可以下载或查看,没有帐号?立即注册

x

帖子地址: 

回复

使用道具 举报

分享
推广
火星云矿 | 预约S19Pro,享500抵1000!
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

草根技术分享(草根吧)是全球知名中文IT技术交流平台,创建于2021年,包含原创博客、精品问答、职业培训、技术社区、资源下载等产品服务,提供原创、优质、完整内容的专业IT技术开发社区。
  • 官方手机版

  • 微信公众号

  • 商务合作