用VUE实现一个简单的学生信息管理系统

用VUE实现一个学生信息管理系统

一、主要功能

本次任务主要是使用VUE来实现一个简单的学生信息管理系统，主要功能为：

1.显示所有学生的信息（默认为10个)
2. 点击按钮，显示出学号尾号为单数(或双数）的学生信息
3. 增加学生信息
4. 要求使用VUE中 父子组件间通信

二、实现思路

1.数据管理：使用json数组的方式来管理储存数据
2.显示学生信息：因为组件是可复用的 Vue 实例，所以在这里引入子组件（用来显示每个学生的信息），将主页作为父组件。主页（父组件）使用v-for循环显示子组件。
3.按单双号筛选查找学生：循环遍历json数组，进行判断，把符合条件的信息放到新的json数组。
4.使用 v-if 把符合筛选条件的学生信息显示在主页上。

三、代码实现

1、父子组件定义

父组件 ：首先要定义要调用的组件

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

子组件：

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

2、组件中的通信

组件是通过Prop向子组件传递数据的

父组件：使用v-for 遍历学生信息数组
通过：card_item（子组件定义的接受数据的名字） = “stu”（父组件传给子组件的数据）

    <div  v-if="flag_danshu==1"><Child-com id="1" class="list" v-for=