vue使用Hbuilder写一个简易计算器

vue使用Hbuilder写一个简易计算器需要使用switch,vue中的switch判断语法参考(https://blog.csdn.net/zyf13716764752/article/details/82868187),这是总体代码:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<h1>计算器</h1>
		<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		<div id="app">
			<div class="input-wrapper">
				<input type="text" v-model="number1" placeholder=
  • 0
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
好的,下面是一个简单的Vue计算器示例,已经加上了注释: ```html <template> <div> <h1>简易计算器</h1> <div> <input type="text" v-model="result" disabled /> </div> <div> <button @click="addNumber(1)">1</button> <button @click="addNumber(2)">2</button> <button @click="addNumber(3)">3</button> <button @click="addOperator('+')">+</button> </div> <div> <button @click="addNumber(4)">4</button> <button @click="addNumber(5)">5</button> <button @click="addNumber(6)">6</button> <button @click="addOperator('-')">-</button> </div> <div> <button @click="addNumber(7)">7</button> <button @click="addNumber(8)">8</button> <button @click="addNumber(9)">9</button> <button @click="addOperator('*')">*</button> </div> <div> <button @click="addNumber(0)">0</button> <button @click="clear">C</button> <button @click="calculate">=</button> <button @click="addOperator('/')">/</button> </div> </div> </template> <script> export default { data() { return { result: "", // 计算结果 currentNumber: "", // 当前输入的数字 operator: "", // 当前操作符 isOperatorClicked: false, // 是否点击了操作符 }; }, methods: { // 添加数字 addNumber(number) { if (this.isOperatorClicked) { // 如果已经点击了操作符,则清空当前数字 this.currentNumber = ""; this.isOperatorClicked = false; } this.currentNumber += number; this.result += number; }, // 添加操作符 addOperator(operator) { if (this.operator !== "") { // 如果已经有操作符,则计算结果 this.calculate(); } this.operator = operator; this.isOperatorClicked = true; this.result += operator; }, // 计算结果 calculate() { if (this.operator === "+") { this.result = String( Number(this.result) + Number(this.currentNumber) ); } else if (this.operator === "-") { this.result = String( Number(this.result) - Number(this.currentNumber) ); } else if (this.operator === "*") { this.result = String( Number(this.result) * Number(this.currentNumber) ); } else if (this.operator === "/") { this.result = String( Number(this.result) / Number(this.currentNumber) ); } this.currentNumber = ""; this.operator = ""; this.isOperatorClicked = true; }, // 清空计算器 clear() { this.result = ""; this.currentNumber = ""; this.operator = ""; this.isOperatorClicked = false; }, }, }; </script> ``` 这个计算器支持加、减、乘、除四个基本运算,可以在输入数字后点击操作符进行计算,也可以在输入数字后继续输入数字,直到点击操作符进行计算。点击 C 按钮可以清空计算器。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值