[JavaScript知识库]Vue教你如何实现简单计算器

总体样式

?

?

div样式

<div id="app">
			<input type="number" v-model="num1" />
			<select name="" v-model="opt">
				<option value="+">+</option>
				<option value="-">-</option>
				<option value="*">*</option>
				<option value="/">/</option>
			</select>
			<input type="number" v-model="num2"  />
			<button type="button" @click="calc()">=</button>
			<span>{{result}}</span>
		</div>

js样式

	new Vue({
				el: "#app",
				data: {
					num1: 1,
					num2: 1,
					result: 0,
					opt: "+",
				},
				methods: {
					calc() {
						switch (this.opt) {
							case "+":
								this.result = parseInt(this.num1) + parseInt(this.num2)
								break;
							case "-":
								this.result = parseInt(this.num1) - parseInt(this.num2)
								break;
							case "*":
								this.result = parseInt(this.num1) * parseInt(this.num2)
								break;
							case "/":
								this.result = parseInt(this.num1) / parseInt(this.num2)
								break;

						}
					}
				}
			})

css样式根据自己喜欢加。