Utilice VUE para realizar un sistema simple de gestión de la información de los estudiantes

Realice un sistema de gestión de la información de los estudiantes con VUE

1. Funciones principales

Esta tarea consiste principalmente en utilizar VUE para implementar un sencillo sistema de gestión de la información del alumno, las funciones principales son:

1. Mostrar la información de todos los estudiantes (el valor predeterminado es 10)
2. Hacer clic en el botón para mostrar la información del estudiante cuyo número de estudiante es singular (o par)
3. Agregar información del estudiante
4. Requerir comunicación entre los componentes padre e hijo en VUE

Dos, realización de ideas

1. Administración de datos: use una matriz json para administrar y almacenar datos
2. Mostrar información del estudiante: debido a que el componente es una instancia de Vue reutilizable, los subcomponentes (usados ​​para mostrar la información de cada estudiante) se introducen aquí y la página de inicio es utilizado como componente principal. La página de inicio (componente principal) utiliza un bucle v-for para mostrar los componentes secundarios.
3. Filtre y encuentre estudiantes por números pares e impares: recorra la matriz json, haga juicios y coloque la información calificada en la nueva matriz json.
4. Use v-if para mostrar la información del estudiante que cumpla con los criterios de selección en la página de inicio.

Tres, implementación de código

1. Definición de componente padre-hijo

Componente padre: primero defina el componente a llamar

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

Subconjunto:

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

2. Comunicación en componentes

Los componentes pasan datos a los subcomponentes a través de Prop

Componente principal: use v-for para recorrer la matriz de información del estudiante a
través de: card_item (el nombre de los datos aceptados definidos por el componente secundario) = "stu" (los datos pasados ​​del componente principal al componente secundario)

    <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>

Subconjunto:

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

3. Muestre la información de los estudiantes cuyo número de estudiantes es singular (o par) (tome el singular como ejemplo)

 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. Agregue la información del estudiante

 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('添加成功');
        
      }
    }

Cuatro, pantalla de efectos

Página de inicio

Muestra información del estudiante con el final singular de la identificación del estudiante

Agregar información del estudiante

Cinco, resumen

Aunque es solo una pequeña demostración, todavía hay muchos problemas en su finalización, como la diferencia entre v-show y v-if. Al principio, quería usar v-show para mostrar información diferente de los estudiantes de acuerdo con los criterios del filtro, pero descubrí que incluso la información de los estudiantes que no cumplía con las condiciones actuales se mostraba y mostraba. Después de pedir ayuda, descubrí que si queremos mostrar varias páginas, y estas páginas son mutuamente excluyentes, usamos v-if, v-else-if, v-else para mostrar.

La siguiente es la diferencia entre v-show y v-if

V-if solo representará los datos cuando se considere cierto y eliminará el código incluido cuando sea falso. A menos que los datos se vuelvan a generar, v-if volverá a juzgar. Se puede decir que el uso tiende a operar sobre datos al mismo tiempo.
v-show es representar los datos primero sin importar cuál sea el juicio, pero cuando es falso, se muestra el nodo: none; operation. Entonces, sin volver a renderizar los datos, cambiar el valor de los datos puede hacer que los datos se muestren u oculten.