一道笔试题(vue,react) -凯发ag旗舰厅登录网址下载

题目：

vue代码

1 33 34 87 88

 

详解：

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

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

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

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

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

代码：

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

1 set checkoperate(nval: string) { 2 if (this.num2 === 0 && nval === '/') { 3 this.value = '除数不能为0' 4 } else { 5 this.operate = nval 6 } 7 }

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

1 set checknum2(nval: number) { 2 if (this.operate === '/' && nval === 0) { 3 this.value = '除数不能为0' 4 } else { 5 this.num2 = nval 6 } 7 }

3、计算值的方法

1 colculatenum (): void { 2 switch (this.operate) { 3 case ' ': this.value = this.num1 this.num2 ''; break 4 case '-': this.value = this.num1 - this.num2 ''; break 5 case '*': this.value = this.num1 * this.num2 ''; break 6 case '/': 7 if (this.num2 === 0) { 8 this.value = '除数不能为0' 9 }　else { 10 this.value = this.num1 / this.num2 ''; 11 } 12 break 13 default: this.value = '错误的操作符' 14 } 15 }

 

实际操作：

 

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

 

单元测试：

1 import { shallowmount } from "@vue/test-utils"; 2 import colculate from "@/components/colculate.vue"; 3 4 describe("colculate.vue", () => { 5 it("计算属性是否正确", () => { 6 const wrapper = shallowmount(colculate); 7 wrapper.setdata({ num1: 10 }); 8 wrapper.setdata({ operate: "*" }); 9 wrapper.setdata({ num2: 12 }); 10 const button = wrapper.find(".colculate-btn"); 11 button.trigger("click"); 12 expect(wrapper.vm.$data.value).toequal("120"); 13 }); 14 // 一般情况下不会出现这种情况 15 it("当除数为0时，返回结果是除数不能为0", () => { 16 const wrapper = shallowmount(colculate); 17 wrapper.setdata({ num1: 10 }); 18 wrapper.setdata({ operate: "/" }); 19 wrapper.setdata({ num2: 0 }); 20 const button = wrapper.find(".colculate-btn"); 21 button.trigger("click"); 22 expect(wrapper.vm.$data.value).toequal("除数不能为0"); 23 }); 24 it("［改除数为0时］当除数为0时，返回结果是除数不能为0", () => { 25 const wrapper = shallowmount(colculate); 26 wrapper.setdata({ num1: 10 }); 27 wrapper.setdata({ operate: "/" }); 28 wrapper.setdata({ num2: 5 }); 29 const button = wrapper.find(".colculate-btn"); 30 button.trigger("click"); 31 expect(wrapper.vm.$data.value).toequal("2"); 32 wrapper.setdata({ num2: 0 }); 33 button.trigger("click"); 34 expect(wrapper.vm.$data.value).toequal("除数不能为0"); 35 }); 36 it("［改操作符为除法时］当除数为0时，返回结果是除数不能为0", () => { 37 const wrapper = shallowmount(colculate); 38 wrapper.setdata({ num1: 10 }); 39 wrapper.setdata({ operate: "*" }); 40 wrapper.setdata({ num2: 0 }); 41 const button = wrapper.find(".colculate-btn"); 42 button.trigger("click"); 43 expect(wrapper.vm.$data.value).toequal("0"); 44 wrapper.setdata({ operate: "/" }); 45 button.trigger("click"); 46 expect(wrapper.vm.$data.value).toequal("除数不能为0"); 47 }); 48 });

 

结果

 

 

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.stateswitch (operate) {case ' ':showvalue = num1 num2breakcase '-':showvalue = num1 - num2breakcase '*':showvalue = num1 * num2breakcase '/':if (num2 === 0) {showvalue = '除数不能为0'} else {showvalue = num1 / num2}breakdefault:showvalue = '错误的操作符'}this.setstate({showvalue})}render() {const operateflag = [' ', '-', '*', '/']const numlimitlist = array(100).fill('').map((_, v) => v)return ( )} }export default app

 

转载于:https://www.cnblogs.com/chentingjun/p/10505016.html

总结

以上是凯发ag旗舰厅登录网址下载为你收集整理的一道笔试题(vue,react)的全部内容，希望文章能够帮你解决所遇到的问题。

如果觉得凯发ag旗舰厅登录网址下载网站内容还不错，欢迎将凯发ag旗舰厅登录网址下载推荐给好友。