一道笔试题(vue,react)

题目：

vue代码

 <template>

   <div class="colculate">

     <div>

       <select v-model="num1" placeholder="数字1">

         <option

           v-for="item in numLimitList"

           :key="item"

           :label="item"

           :value="item">

         </option>

       </select>

       <select v-model="checkOperate" placeholder="处理符">

         <option

           v-for="item in operateFlag"

           :key="item"

           :label="item"

           :value="item">

         </option>

       </select>

       <select v-model="checkNum2" placeholder="数字2">

         <option

           v-for="item in numLimitList"

           :key="item"

           :label="item"

           :value="item">

         </option>

       </select>

       <button class="colculate-btn" @click="colculateNum">Colculate</button>

     </div>

     <div>Answer: <span class="show-result"> {{value}} </span></div>

   </div>

 </template>

 <script lang="ts">

 import { Component, Prop, Vue } from "vue-property-decorator";

 const operateFlag = ['+', '-', '*', '/']

 const numLimitList = Array(100).fill('').map((_, v) => v)

 @Component

 export default class Colculate extends Vue {

   @Prop() private msg!: string;

   message: string = 'Hello!'

   operateFlag: string[] = operateFlag

   numLimitList: number[] = numLimitList

   num1: number = 0

   num2: number = 0

   operate: string = '+'

   value: any = ''

   set checkOperate(nVal: string) {

     if (this.num2 === 0 && nVal === '/') {

       this.value = '除数不能为0'

     } else {

       this.operate = nVal

     }

   }

   get checkOperate() {

     return this.operate

   }

   set checkNum2(nVal: number) {

     if (this.operate === '/' && nVal === 0) {

       this.value = '除数不能为0'

     } else {

       this.num2 = nVal

     }

   }

   get checkNum2() {

     return this.num2

   }

   colculateNum (): void {

     switch (this.operate) {

       case '+': this.value = this.num1 + this.num2; break

       case '-': this.value = this.num1 - this.num2; break

       case '*': this.value = this.num1 * this.num2; break

       case '/':

         if (this.num2 === 0) {

           this.value = '除数不能为0'

         }　else {

           this.value = this.num1 / this.num2;

         }

         break

       default: this.value = '错误的操作符'

     }

   }

 }

 </script>

 <style lang="scss" scoped>

 .colculate {}

 </style>

详解：

功能-->计算num1和num2不同操作[+-*/]的计算式的结果，

num1-->计算式的第一个值，不需要做任何处理

num2-->计算式的第二个值，注意点：当是除法时，num2不能为0，如果用户操作改为0，则会提示用户‘除数不能为0’

operate-->计算式的操作符，注意点：当num2为0时，如果用户改操作符为'/'时，则会提示用户‘除数不能为0’

点击计算Colculate按钮时计算组成式子的结果，并显示出来

代码：

1、准备操作符的改变时的检查

 set checkOperate(nVal: string) {

     if (this.num2 === 0 && nVal === '/') {

       this.value = '除数不能为0'

     } else {

       this.operate = nVal

     }

   }

2、准备num2值改变时的检查

 set checkNum2(nVal: number) {

     if (this.operate === '/' && nVal === 0) {

       this.value = '除数不能为0'

     } else {

       this.num2 = nVal

     }

   }

3、计算值的方法

 colculateNum (): void {

     switch (this.operate) {

       case '+': this.value = this.num1 + this.num2 + ''; break

       case '-': this.value = this.num1 - this.num2 + ''; break

       case '*': this.value = this.num1 * this.num2 + ''; break

       case '/':

         if (this.num2 === 0) {

           this.value = '除数不能为0'

         }　else {

           this.value = this.num1 / this.num2 + '';

         }

         break

       default: this.value = '错误的操作符'

     }

   }

实际操作：

计算实时处理验证为0的情况

单元测试：

 import { shallowMount } from "@vue/test-utils";

 import Colculate from "@/components/Colculate.vue";

 describe("Colculate.vue", () => {

   it("计算属性是否正确", () => {

     const wrapper = shallowMount(Colculate);

     wrapper.setData({ num1: 10 });

     wrapper.setData({ operate: "*" });

     wrapper.setData({ num2: 12 });

     const button = wrapper.find(".colculate-btn");

     button.trigger("click");

     expect(wrapper.vm.$data.value).toEqual("120");

   });

   // 一般情况下不会出现这种情况

   it("当除数为0时，返回结果是除数不能为0", () => {

     const wrapper = shallowMount(Colculate);

     wrapper.setData({ num1: 10 });

     wrapper.setData({ operate: "/" });

     wrapper.setData({ num2: 0 });

     const button = wrapper.find(".colculate-btn");

     button.trigger("click");

     expect(wrapper.vm.$data.value).toEqual("除数不能为0");

   });

   it("［改除数为0时］当除数为0时，返回结果是除数不能为0", () => {

     const wrapper = shallowMount(Colculate);

     wrapper.setData({ num1: 10 });

     wrapper.setData({ operate: "/" });

     wrapper.setData({ num2: 5 });

     const button = wrapper.find(".colculate-btn");

     button.trigger("click");

     expect(wrapper.vm.$data.value).toEqual("2");

     wrapper.setData({ num2: 0 });

     button.trigger("click");

     expect(wrapper.vm.$data.value).toEqual("除数不能为0");

   });

   it("［改操作符为除法时］当除数为0时，返回结果是除数不能为0", () => {

     const wrapper = shallowMount(Colculate);

     wrapper.setData({ num1: 10 });

     wrapper.setData({ operate: "*" });

     wrapper.setData({ num2: 0 });

     const button = wrapper.find(".colculate-btn");

     button.trigger("click");

     expect(wrapper.vm.$data.value).toEqual("0");

     wrapper.setData({ operate: "/" });

     button.trigger("click");

     expect(wrapper.vm.$data.value).toEqual("除数不能为0");

   });

 });

结果

react

import React, { Component } from 'react'

class App extends Component {

  constructor() {

    super()

    this.state = {

      showValue: '',

      operate: '+',

      num1: 0,

      num2: 0

    }

  }

  /**

   * 修改数字1

   */

  handleChangeNum1 = e => {

    this.setState({

      num1: Number(e.target.value)

    })

  }

/**

 * 修改操作符

 */

  handleChangeOperate = e => {

    this.setState({

      operate: e.target.value

    })

  }

/**

 * 修改数字2

 */

  handleChangeNum2 = e => {

    this.setState({

      num2: Number(e.target.value)

    })

  }

  /**

   * 计算计算式

   */

  colculateNum = () => {

    let showValue = ''

    let { num1, num2, operate } = this.state

    switch (operate) {

      case '+':

        showValue = num1 + num2

        break

      case '-':

        showValue = num1 - num2

        break

      case '*':

        showValue = num1 * num2

        break

      case '/':

        if (num2 === 0) {

          showValue = '除数不能为0'

        } else {

          showValue = num1 / num2

        }

        break

      default:

        showValue = '错误的操作符'

    }

    this.setState({

      showValue

    })

  }

  render() {

    const operateFlag = ['+', '-', '*', '/']

    const numLimitList = Array(100)

      .fill('')

      .map((_, v) => v)

    return (

      <div className="colculate">

        <div>

          <select title="数字1" value={this.state.num1} onChange={this.handleChangeNum1}>

            {numLimitList.map(function(item) {

              return <option value={item} label={item} key={item} />

            })}

          </select>

          <select title="操作符" value={this.state.operate} onChange={this.handleChangeOperate}>

            {operateFlag.map(function(item) {

              return <option value={item} label={item} key={item} />

            })}

          </select>

          <select title="数字2" value={this.state.num2} onChange={this.handleChangeNum2}>

            {numLimitList.map(function(item) {

              return <option value={item} label={item} key={item} />

            })}

          </select>

          <button style={{ marginLeft: '10px' }} onClick={this.colculateNum}>

            Colculate

          </button>

        </div>

        <div>

          Answer: <span className="show-result">{this.state.showValue}</span>

        </div>

      </div>

    )

  }

}

export default App

巴特西

一道笔试题(vue,react)

最新文章

热门文章