A simple student information management system is implemented with VUE

First, the main function

This task is mainly to use VUE to implement a simple student information management system, the main functions are:

1. Show information for all students (10 by default) Click the button to display student information with a singular (or double) student number at the end of the school number Increase student information 4. Requires communication between parent and child components in VUE

Second, the realization of ideas

1. Data management: Manage stored data using the json array
2. Show student information: Because components are reusable Vue instances, introduce child components here (to display information for each student) and use the home page as the parent component. T he home page (parent component) uses v-for loops to display child components.
3. Filter by single-double number to find students: loop through the json array, make a judgment, and put the eligible information into the new json array.
4. Use v-if to display student information that meets the screening criteria on the home page.

Third, the code implementation

1, parent-child component definition

Parent component: The first thing to define is to call the component

export default {




  name: 'HelloWorld',
  components: {
    ChildCom//调用组件
  },

Subcommuties:

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

2, the communication in the component

Components pass data to child components through Prop

Parent component: Use v-for to traverse an array of student information By: card_item (name of accepted data defined by the child component) stu (data passed by 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>

Subcommuties:

      <div>姓名：{{ card_item.name }} </div>
      <div>学号：{{card_item.stuId}}</div>
      <div v-if="card_item.gender==1">性别：男</div>
      <div v-else>性别：女</div>

3, showing the student information with the end number of the school number is singular (or double) (for 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, increase 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('添加成功');
        
      }
    }

Fourth, the effect of display

home page

Displays student information with a singular number at the end of the school number

Increase student information

V. Summary

Although only a small demo, there are many problems with completion, 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 by filter, but found that even if the student information that did not meet the current criteria was rendered and displayed, and by asking for help, we found that if we were to display multiple pages and those pages were mutually exclusive, we used v-if, v-else-if, v-else to display them.

The following is the difference between v-show and v-if

v-if renders the data only when it is judged to be true, and the included code is deleted at false. v -if will not be re-judged unless the data is rendered again. I t can be said that usage tends to operate on data once. v -show is to render the data first, no matter what the judgment is, but when false, the node is display:none; o peration. So without re-rendering the data, changing the value of the data can make the data appear or hide.