Implementing a simple student information management system based on 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 information of all students (default is 10)
2. Click the button to display the information of students whose student ID ends with an odd number (or even number).
3. Add student information
4. Requires communication between parent and child components in VUE

2. Implementation ideas

1. Data management: Use json array to manage and store data
2. Display student information: Because the component is a reusable Vue instance, a child component is introduced here (to display each student's information) and the homepage is used as the parent component. The home page (parent component) uses a v-for loop to display child components.
3. Search for students by odd and even numbers: loop through the json array, make judgments, and put the information that meets the conditions into a new json array.
4. Use v-if to display the student information that meets the filtering criteria on the homepage.

3. Code Implementation

1. Parent-child component definition

Parent component: First, define the component to be called

export default {
 name: 'HelloWorld',
 components:
 ChildCom//Calling component},

Subcomponents:

export default {
 name: 'Child',
 props: [
 'card_item'
 ],
 data () {
 return {
 }
 }
}

2. Communication among components

Components pass data to subcomponents through Props

Parent component: Use v-for to traverse the student information array
Through: card_item (the name of the data accepted 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>

Subcomponents:

<div>Name: {{ card_item.name }} </div>
  <div>Student ID: {{card_item.stuId}}</div>
  <div v-if="card_item.gender==1">Gender: Male</div>
  <div v-else>Gender: Female</div>

3. Display the student information whose student ID ends with an odd number (or even number) (taking odd number 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);//If the conditions are met, add it to the json array used to store singular information}
  )
  // alert(this.new_list[1]);
  this.flag_all=0; //Show all this.flag_danshu=1; //Show odd numbers this.flag_shuangshu=0; //Show even numbers},

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('Please complete the information');
  }
  else{
  var item ={};
  item.stuId=id;
  item.name=name;
  item.gender=gender;
  this.stu_list.push(item);
  alert('Added successfully');
  
  }
 }

4. Effect display

Home

Display student information whose student ID ends in an odd number

Add student information

V. Conclusion

Although it is just a small demo, I still encountered many problems in the process of completing it, such as paying attention to the difference between v-show and v-if. At first, I wanted to use v-show to display different student information according to the filtering conditions, but I found that even if the student information did not meet the current conditions, it was still rendered and displayed. After seeking help, I found that if we want to display multiple pages and these pages are mutually exclusive, we use v-if, v-else-if, and v-else to display them.

Here are the differences between v-show and v-if

v-if will only render the data when it is judged to be true, and delete the contained code when it is false. Unless the data is rendered again, v-if will be re-judged. It can be said that the usage tends to operate on the data once.
v-show will render the data first regardless of the judgment, but when it is false, the node will be displayed:none;. So changing the value of the data can make the data appear or disappear without re-rendering the data.

This is the end of this article about implementing a simple student information management system based on VUE. For more relevant vue student information management system content, please search for previous articles on 123WORDPRESS.COM or continue to browse the following related articles. I hope everyone will support 123WORDPRESS.COM in the future!

This is the end of this article about implementing a simple student information management system based on VUE. For more relevant vue student information management system content, please search for previous articles on 123WORDPRESS.COM or continue to browse the following related articles. I hope everyone will support 123WORDPRESS.COM in the future!