Use o VUE para criar um sistema simples de gerenciamento de informações do aluno

Realize um sistema de gerenciamento de informações do aluno com VUE

1. Funções principais

Esta tarefa é principalmente usar o VUE para implementar um sistema simples de gerenciamento de informações do aluno, as principais funções são:

1. Exibir as informações de todos os alunos (o padrão é 10)
2. Clique no botão para exibir as informações do aluno cujo número de aluno é singular (ou até)
3. Adicionar informações do aluno
4. Exigir comunicação entre os componentes pai e filho no VUE

Dois, realização de ideias

1. Gerenciamento de dados: use um array json para gerenciar e armazenar dados
2. Exibir informações do aluno: porque o componente é uma instância reutilizável do Vue, os subcomponentes (usados ​​para exibir as informações de cada aluno) são introduzidos aqui, e a página inicial é usado como o componente pai. A página inicial (componente pai) usa um loop v-for para exibir os componentes filhos.
3. Filtre e encontre alunos por números pares e ímpares: faça um loop na matriz json, faça julgamentos e coloque as informações qualificadas na nova matriz json.
4. Use v-if para exibir as informações do aluno que atendem aos critérios de triagem na página inicial.

Três, implementação de código

1. Definição do componente pai-filho

Componente pai: primeiro defina o componente a ser chamado

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

Submontagem:

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

2. Comunicação em componentes

Os componentes passam dados para os subcomponentes por meio do Prop

Componente pai: use v-for para percorrer a matriz de informações do aluno
por meio de: card_item (o nome dos dados aceitos definidos pelo componente filho) = "stu" (os dados passados ​​do componente pai para o componente filho)

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

Submontagem:

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

3. Exiba as informações dos alunos cujo número de alunos é singular (ou até) (tome o singular como exemplo)

 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. Adicionar informações do aluno

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

Quatro, exibição de efeito

Página inicial

Exibir informações do aluno com um único final de ID do aluno

Adicionar informações do aluno

Cinco, resumo

Embora seja apenas uma pequena demonstração, ainda existem muitos problemas em sua conclusão, como a diferença entre v-show e v-if. No início, eu queria usar o v-show para exibir diferentes informações do aluno de acordo com os critérios do filtro, mas descobri que mesmo as informações do aluno que não atendiam às condições atuais foram processadas e exibidas. Depois de pedir ajuda, descobri que se queremos exibir várias páginas, e essas páginas são mutuamente exclusivas, usamos v-if, v-else-if, v-else para exibir.

A seguir está a diferença entre v-show e v-if

V-if apenas renderizará os dados quando forem considerados verdadeiros e excluirá o código incluído quando for falso. A menos que os dados sejam renderizados novamente, v-if irá julgar novamente. Pode-se dizer que o uso tende a operar em dados ao mesmo tempo.
v-show deve renderizar os dados primeiro, não importa qual seja o julgamento, mas quando for falso, o nó é exibido: nenhum; operação. Portanto, sem renderizar novamente os dados, alterar o valor dos dados pode fazer com que os dados sejam exibidos ou ocultados.