vue封装组件小案例，做数学题

视频：↓

lihesheng.1iq.cn/Numshuxue.m…

数据↓

{
  num:Math.floor(Math.random()*10),
  num2:Math.floor(Math.random()*10),
  flag:false,
  result:'未完成'，
  He:''
},

思路↓：

首先定义两个子组件，第一个组件封装计算内容第二个组件封装显示正确或错误和
未完成的模块，点击提交校验输入的内容是否正确如果正确修改未完成的值为正或
错误，并且显示对应的文字颜色，并且让当前行的提交禁用。就可以实现简易的计
算数学题功能。

注意事项

1.组件命名遵循驼峰命名法，或_隔开 例如：my_goods myGoods 

2.数据验证是否正确不需要判断条件 直接：shuzu.num + shuzu.num2 == shuzu.He
1+2== 输入的和 将它复值给一个变量用来操作变量就行

3.验证是否正确显示对应文字颜色可以使用：class 例如：↓
'gray'对应的是'class'类名  val.result=='未完成' 是判断条件
:class="{'gray':val.result=='未完成','green':val.result=='正确','red':val.result=='错误'}"

效果

父组件

<template>
  <div class="home">
    <cou_ter :arr="arr" @inAdd="inAdd"></cou_ter>
    <fooTer :arr="arr"></fooTer>
  </div>
</template>

<script>
import cou_ter from '@/components/cou_ter.vue'
import fooTer from '@/components/footerIndex.vue'
export default {
  name: 'Home',
  components: {
    cou_ter,
    fooTer
  },
  data() {
    return {
      arr: [
        {
          num: Math.floor(Math.random() * 10),
          num2: Math.floor(Math.random() * 10),
          flag: false,
          result: '未完成',
          He: ''
        },
        {
          num: Math.floor(Math.random() * 10),
          num2: Math.floor(Math.random() * 10),
          flag: false,
          result: '未完成',
          He: ''
        },
        {
          num: Math.floor(Math.random() * 10),
          num2: Math.floor(Math.random() * 10),
          flag: false,
          result: '未完成',
          He: ''
        },
        {
          num: Math.floor(Math.random() * 10),
          num2: Math.floor(Math.random() * 10),
          flag: false,
          result: '未完成',
          He: ''
        },
        {
          num: Math.floor(Math.random() * 10),
          num2: Math.floor(Math.random() * 10),
          flag: false,
          result: '未完成',
          He: ''
        }
      ]

    }
  },
  methods: {
    inAdd(v){
      console.log(v);
      this.arr[v.index].result=v.result
      this.arr[v.index].flag=true
    }
  }
}
</script>

<style>

</style>

子组件内容组件

<template>
    <div class="cou_ter">
        <!-- 这个组件时显示内容 -->
        <ul>
            <li v-for="val, i in arr" :key="i">
                {{ val.num }}+{{ val.num2 }} =
                <input type="text" v-model="val.He">
                <button @click="add(i)" :disabled="val.flag">提交</button>
            </li>
        </ul>
    </div>
</template>
  
<script>
export default {
    name: 'cou_ter',
    props: ['arr'],
    data() {
        return {
        }
    },
    methods: {
        add(i) {
            let shuzu = this.arr[i]
            console.log(shuzu);
            let he = shuzu.num + shuzu.num2 == shuzu.He
            console.log(he);
            let obj = {}
            if (he) {
                obj = {
                    result: '正确',
                    index: i
                }
            } else {
                obj = {
                    result: '错误',
                    index: i
                }
            }
            this.$emit('inAdd', obj)
        }
    }
}
</script>
  
<style>

</style>

子底部 是否正确

<template>
    <div class="footerIndex">
      <!-- 已完成和未完成 -->
      <p v-for="val,i in arr" :key="i" 
      :class="{'gray':val.result=='未完成','green':val.result=='正确','red':val.result=='错误'}"
      >
        {{i+1}}:{{val.result}}
      </p>
    </div>
  </template>
  
  <script>
  export default {
    name:'footerIndex',
    props:['arr'],
    data(){
      return{
  
      }
    },
    methods:{
      
    }
  
  }
  </script>
  
  <style lang="scss" scoped>
  .footerIndex{
    display: flex;
  }
  .red{
    color: red;
  }
  
  .gray{
    color: gray;
  }
  .green{
    color: green;
  }
  </style>