Use VUE to Realize a Simple Student Information Management System
Realize a student information management system with VUE
1. Main functions
This task is mainly to use VUE to implement a simple student information management system, the main functions are:
1. Display the information of all students (default is 10)
2. Click the button to display the student information whose student number is singular (or even)
3. Add student information
4. Require communication between parent and child components in VUE
Two, realization of ideas
1. Data management: use a json array to manage and store data
2. Display student information: because the component is a reusable Vue instance, sub-components (used to display the information of each student) are introduced here, and the homepage is used as The parent component. The home page (parent component) uses a v-for loop to display child components.
3. Filter and find students by odd and even numbers: loop through the json array, make judgments, and put the qualified information in the new json array.
4. Use v-if to display student information that meets the screening criteria on the homepage.
Three, code implementation
1. Parent-child component definition
Parent component: first define the component to be called
export default {
name: 'HelloWorld',
components: {
ChildCom//调用组件
},
Subassembly:
export default {
name: 'Child',
props: [
'card_item'
],
data () {
return {
}
}
}
2. Communication in components
Components pass data to subcomponents through Prop
Parent component: Use v-for to traverse the student information array
through: card_item (the name of the accepted data defined by the child component) = "stu" (the data passed from the parent component to the child component)
<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>
Subassembly:
<div>姓名：{
{ card_item.name }} </div>
<div>学号：{
{card_item.stuId}}</div>
<div v-if="card_item.gender==1">性别：男</div>
<div v-else>性别：女</div>
3. Display the information of students whose student number is singular (or even) (take singular as an example)
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 student information
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('添加成功');
}
}
Four, effect display
Home page
Display student information with singular end of student ID
Add student information
Five, summary
Although it is only a small demo, there are still many problems in its completion, such as the difference between v-show and v-if. At first, I wanted to use v-show to display different student information according to the filter criteria, but found that even the student information that did not meet the current conditions was rendered and displayed. After asking for help, I found out that if we want to display multiple Pages, and these pages are mutually exclusive, we use v-if, v-else-if, v-else to display.
The following is the difference between v-show and v-if
V-if will only render the data when it is judged to be true, and delete the included code when it is false. Unless the data is rendered again, v-if will re-judge. It can be said that usage tends to operate on data at once.
v-show is to render the data first no matter what the judgment is, but when it is false, the node is displayed: none; operation. So without re-rendering the data, changing the value of the data can make the data show or hide.