客服电话
APP下载
迪恩网络APP
随时随地掌握行业动态
官方微信
扫描二维码
关注迪恩网络微信公众号
一、主要功能本次任务主要是使用VUE来实现一个简单的学生信息管理系统，主要功能为： 1.显示所有学生的信息（默认为10个) 二、实现思路1.数据管理：使用json数组的方式来管理储存数据 三、代码实现1、父子组件定义 父组件 ：首先要定义要调用的组件
export default {
name: 'HelloWorld',
components: {
ChildCom//调用组件
},
子组件：
export default {
name: 'Child',
props: [
'card_item'
],
data () {
return {
}
}
}
2、组件中的通信 组件是通过Prop向子组件传递数据的 父组件：使用v-for 遍历学生信息数组 <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('添加成功');
}
}
四、效果展示主页 显示学号尾号为单数的学生信息 增加学生信息 五、总结虽然只是很小的一个demo，但在完成中还是遇到了很多问题，比如要注意 v-show 和v-if的区别。一开始，本来想使用v-show来按筛选条件来显示不同的学生信息，但是发现就算不符合当前条件的学生信息还是被渲染并且显示出来了，通过寻求帮助，才发现如果我们要显示多个页面，并且这些页面是互斥的关系话，我们使用v-if ，v-else-if，v-else 来显示。 以下是v-show 和 v-if 的区别
到此这篇关于基于VUE实现简单的学生信息管理系统的文章就介绍到这了,更多相关vue学生信息管理系统内容请搜索极客世界以前的文章或继续浏览下面的相关文章希望大家以后多多支持极客世界！ 到此这篇关于基于VUE实现简单的学生信息管理系统的文章就介绍到这了,更多相关vue学生信息管理系统内容请搜索极客世界以前的文章或继续浏览下面的相关文章希望大家以后多多支持极客世界！ |
请发表评论