題目：

vue代碼

1 <template> 2 <div class="colculate"> 3 <div> 4 <select v-model="num1" placeholder="數字1"> 5 <option 6 v-for="item in numLimitList" 7 :key="item" 8 :label="item" 9 :value="item"> 10 </option> 11 </select> 12 <select v-model="checkOperate" placeholder="處理符"> 13 <option 14 v-for="item in operateFlag" 15 :key="item" 16 :label="item" 17 :value="item"> 18 </option> 19 </select> 20 <select v-model="checkNum2" placeholder="數字2"> 21 <option 22 v-for="item in numLimitList" 23 :key="item" 24 :label="item" 25 :value="item"> 26 </option> 27 </select> 28 <button class="colculate-btn" @click="colculateNum">Colculate</button> 29 </div> 30 <div>Answer: <span class="show-result"> {{value}} </span></div> 31 </div> 32 </template> 33 34 <script lang="ts"> 35 import { Component, Prop, Vue } from "vue-property-decorator"; 36 37 const operateFlag = ['+', '-', '*', '/'] 38 const numLimitList = Array(100).fill('').map((_, v) => v) 39 40 @Component 41 export default class Colculate extends Vue { 42 @Prop() private msg!: string; 43 message: string = 'Hello!' 44 operateFlag: string[] = operateFlag 45 numLimitList: number[] = numLimitList 46 num1: number = 0 47 num2: number = 0 48 operate: string = '+' 49 value: any = '' 50 set checkOperate(nVal: string) { 51 if (this.num2 === 0 && nVal === '/') { 52 this.value = '除數不能為0' 53 } else { 54 this.operate = nVal 55 } 56 } 57 get checkOperate() { 58 return this.operate 59 } 60 set checkNum2(nVal: number) { 61 if (this.operate === '/' && nVal === 0) { 62 this.value = '除數不能為0' 63 } else { 64 this.num2 = nVal 65 } 66 } 67 get checkNum2() { 68 return this.num2 69 } 70 colculateNum (): void { 71 switch (this.operate) { 72 case '+': this.value = this.num1 + this.num2; break 73 case '-': this.value = this.num1 - this.num2; break 74 case '*': this.value = this.num1 * this.num2; break 75 case '/': 76 if (this.num2 === 0) { 77 this.value = '除數不能為0' 78 }　else { 79 this.value = this.num1 / this.num2; 80 } 81 break 82 default: this.value = '錯誤的操作符' 83 } 84 } 85 } 86 </script> 87 88 <style lang="scss" scoped> 89 .colculate {} 90 </style>

?

詳解：

功能-->計算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 (<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

?

轉載于:https://www.cnblogs.com/chentingjun/p/10505016.html

總結

以上是生活随笔為你收集整理的一道笔试题(vue,react)的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。